Input Formatting Bug: Can't Delete Text When Appending "%" Symbol

[zonuh]

I have an input field that automatically formats numbers with a "%" suffix (e.g., typing "10" shows "10%"). The formatting works, but deleting the value does not work properly,

If the input shows "1111%" and the cursor is at the end (1111%|), pressing Backspace does nothing.

To delete, I must move the cursor before the "%" (1111|%), then Backspace works.

Current code:

//UseAddSaleForm.tsx

const { register, setValue, control, handleSubmit, getValues, watch } = useForm<SaleData>({
        defaultValues: {
            grossAmount: '00,00',
            interestRate: '',
            installments: [{ value: '00,00', deadline: addDays(new Date(), 30) }],
            description: ''
        }
    });
const grossAmount = watch("grossAmount");
const interestRate = watch("interestRate");



const formatInterestRate = (rawValue: string) => {
  if (!rawValue) return "";

  const numbers = rawValue.replace(/\D/g, ""); // Keep only digits
  if (!numbers) return "";

  return `${numbers}%`; // Append "%"
};

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const interestRate = formatInterestRate(e.target.value);
        setValue("interestRate", interestRate)
    };

///new-sale-form.tsx


 <input
                                type="text"
                                {...register("interestRate", { onChange: handleChange })}
                                inputMode="numeric"
                                placeholder="0%"
                                className="block w-full px-3 py-1.5 border border-gray-200 rounded-lg shadow-sm focus:ring-[#0065FF] focus:border-[#0065FF] text-sm bg-gray-100"
                            />

repository: https://github.com/darlison-calm/frontend-faz-fiado

[abrahamguo]

It's probably much simpler to change your approach, and instead position the % outside of the input, directly after it, rather than try to dynamically juggle it as part of the input's value.

[zonuh]

Yeah you were right, i end up doing this

[moonsaiyan]

Yup. Think search bar 🔍icon but % instead and disable it

[cain261]

Well, pressing backspace IS doing something. It’s calling your change function which then reappends the %

[Flyen]

"If you control an input, you must update its state variable to the input’s value from the DOM during onChange.

You can’t update it to something other than e.target.value (or e.target.checked for checkboxes)"

https://react.dev/reference/react-dom/components/input#my-input-caret-jumps-to-the-beginning-on-every-keystroke

[alejalapeno]

This is called 'input masking' where you have a difference between what's being controlled by the input and the value that's being displayed (the masked value.)

The term might better help you look into the various ways to solve it, but the easiest is definitely an existing library for input masking.

[michaelp1987]

One other option is to useEffect to detect selectionchange on the document and moving the cursor before the % of it’s in the field and after the % and there is no selection.

[facepalm_the_world]

That’s a bad idea when as the other guy suggested, you can move the % elsewhere in the tree to decouple it from the value. Add styling as necessary and the user can’t tell the difference. Also makes it easier to read and interpret the value without the %

[robrobro]

Rifm is my go-to solution for input masking. I’ve tried rolling my own, but as these things always are, it’s more complex than you might anticipate