Using controlled component causes strange behavior

[sergeyzwezdin]

After connecting use-mask-input, using controlled input (passing value/onChange controlled outside), the caret puts on the first character.

Tried to use useMemo to avoid re-rendering of Input component and set its state via ref, but nothing changed.

Here is how it behaves:

Repro project could be found here - https://stackblitz.com/edit/stackblitz-starters-hak8pb?file=app%2Finput.tsx

I think it could be considered as a bug.

[eduardoborges]

Hey @sergeyzwezdin, yes its a bug... im working on a solution. Thanks for reporting.

[eduardoborges]

@sergeyzwezdin I detected when using controlled component the mask alias not works as espected.

For now, you can pass full mask declaration:

const ref = useInputMask({
  mask: '9{1,}[.9{2}]',
  options: {
    placeholder: '',
    rightAlign: true,
  },
});

This example represents a decimal with optional numbers after radix point.

[RHarryH]

@sergeyzwezdin, @eduardoborges My workaround for that issue is to add onChange event with below content:

const caret = event.target.selectionStart;
const element = event.target;
 window.requestAnimationFrame(() => {
    element.selectionStart = caret;
    element.selectionEnd = caret;
})

[htndev]

Here is my solution. It's based on the ref assignment.

<Input
  {...field}
  value={field.value ?? ""}
  ref={(ref) => {
    field.ref(ref);
    withMask("integer", {
      groupSeparator: " ",
      numericInput: true,
      rightAlign: false,
      inputmode: "numeric",
      allowMinus: false,
      removeMaskOnSubmit: true,
      showMaskOnHover: false,
    })(ref);
    ref?.setSelectionRange(field.value?.toString().length ?? 0, field.value?.toString().length ?? 0);
  }}
  placeholder={capacity.placeholder}
/>