react-number-format: The focus timeout introduced in v5 makes the input difficult to test

Hey @jraoult, was occupied with other things since last three weeks, so couldn’t look into this. I understood, what you are saying, and I think I have a proper fix for this without a need of finding when the caret is stable.

Basically will check if the caret position is reset by the browser then only set again inside the time out.

    timeout.current.setCaretTimeout = setTimeout(() => {
      if (el.value === currentValue && el.selectionStart !== caretPos) setCaretPosition(el, caretPos);
    }, 0);

I will fix this. Thanks for your patience.

But even if it the autoselect algo is in parent, you can still have a wrapper component on rnf and do this double effect thing in the wrapper component. Basically in parent instead of doing autoSelect there if the input you are trying to select is rnf input (you can have some class to identify this), set a prop on parent, and forward this to the wrapper and autoselect here.

I know this is patchy solution, but should work, given that correct solution within rnf would take time to come.

Hey @jraoult, so there are two problems.

1. rnf sets input value in two react render cycle, when values from prop has to be applied, basically during the first mount, or if input value has to be updated based on prop (not after type) While I was looking to make this into a single render cycle, looks like its a bigger refactor, and some corner cases are breaking. This double rendering is breaking the autoSelect feature. For that you can apply a hack/patch to auto select in next render. Something like this.

function useRnfAutoSelect(autoSelect) {
  const inputRef = useRef();
  const [_autoSelect, setAutoSelect] = useState();
  useEffect(() => {
    setAutoSelect(autoSelect);
  }, [autoSelect])

  useEffect(() => {
    if (_autoSelect) {
      inputRef.current?.select();
    }
  }, [_autoSelect])

  return inputRef;
}

Here’s an example for the same. https://stackblitz.com/edit/react-ts-rq99uj?file=App.tsx

1. the {{selectAll}} sequence on test. For this I think putting delay would always work as cypress or any test util also put timeout, so they are always guranteed to happen one after other. Also you don’t have to set this globally, only on type events where you have {{selectAll}} sequence.

The proper fix for this would take longer, as it may require some breaking changes.

Humm, I am trying to avoid adding an additional prop, but can’t think of a better solution. I will give it another thought, otherwise, I will add a prop called onCaretPositionChange.

Haven’t got a chance to look into this. Will look into this over this weekend.