Cursor jumps to end when input value comes from "unstated" provider

Question

I have currently facing a problem with provider (from unstated lib) and input. In our project, we have to share inputs values between several components, so we have created a provider (with unstated lib) that contains the values. The values are passing as props into SearchForm component thanks to withSearchFields function.

What is the current behavior? The problem is, each time we want to update the value at any position, the cursor jumps to the end of the input. For example, I have "aaaa", if I type many "b" on the middle of the input in order to have "aabbbbbaa", the result will be "aabaabbbb"

What is the expected behavior ? The cursor doesn't go to the end.

I have simplified our code and add it in CodeSandbox : https://codesandbox.io/s/n2w9xv090

Which versions of React ? 16.8.6

Thank you for your help !

score 0 · Answer 1 · answered Jun 17 '19 at 14:39

You can update unstated state by onBlur.

set a state for Input

const [inputValue, setValue] = useState(value);

  <input
    onChange={event => {
    const { target } = event;
      setValue(target.value);
    }}

pass onBlur to Input

  <input
    onChange={event => {
    const { target } = event;
      setValue(target.value);
    }}
    onBlur={onBlur}

update unstated state by onBlur

  const handldBlur = event => {
    const { target } = event;
    props.setField(target.name, target.value);
  };

I modified your code, you can test it in CodeSandbox : https://codesandbox.io/s/priceless-kowalevski-2kdyn?fontsize=14

Cursor jumps to end when input value comes from "unstated" provider

1 Answers1