Preact: [10.0.0-alpha.2] Safari resets cursor in controlled form inputs

[natevw]

Haven't dived in to see what's going on at all yet, but Safari is not happy with controlled form field components under Preact X. When typing, the cursor is constantly reset to the end of the form field:

1. Place your cursor in the middle of a controlled <input>
2. Type several characters

Expected results

All of the characters appear at the point where cursor was placed. This works correctly in Chrome and Firefox.

Actual results

In Safari, the first character is inserted where the cursor started, but [presumably when the element is re-rendered] then the browser moves the cursor to the end of the field and the remaining characters end up there instead.

Workaround

None found yet (sticking with controlled components anyway). For now we are directing the small audience of this code to use Chrome/Firefox.

Details / sample code

This manifests with a basic controlled input, e.g.:

const Form = () => {
  let [value, setValue] = useState("Type between →← those.");
  return html`<form>
    <input size="100"
      value=${value}
      onInput=${evt => {
        setValue(evt.target.value);
      }}
    />
  </form>`;
};

Full demo available at https://codesandbox.io/s/jj24wqyn0y

[UpperCod]

Big problem this should affect not only preact, I know 2 ways to fix it:

These changes should be applied at the core level, src/diff/props

1. Compare the input.value with props.value, in this way avoid overwriting and the input will keep the position.

2. use document.activeElement, to choose the selectionStart property and manually modify selectionStart and selectionEnd, Example, the example shows only the solution.

For my part I will apply the first solution in @atomico/core.

[marvinhagemeister]

This was fixed with #1438. It implements solution 1 and the fix is already out on npm. We just published alpha 3 a few minutes ago :tada: :100:

[natevw]

Confirmed this is resolved in alpha.3, thanks!