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

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

[rolftimmermans]

I also run into the issue again. Based on the observation by @tylerchr I tried git diff 10.5.15 10.6.0 to see what the cause might be. I have identified the following change as the problem (part of 09c30063cb18d0a1f6e2135f5c45381566dfa22b):

@@ -433,7 +433,9 @@ function diffElementNodes(
                                // despite the attribute not being present. When the attribute
                                // is missing the progress bar is treated as indeterminate.
                                // To fix that we'll always update it when it is 0 for progress elements
-                               (i !== dom.value || (nodeType === 'progress' && !i))
+                               (i !== oldProps.value ||
+                                       i !== dom.value ||
+                                       (nodeType === 'progress' && !i))
                        ) {
                                setProperty(dom, 'value', i, oldProps.value, false);
                        }

I’m not sure about the reasoning behind this change from @developit, but as I understand it the issue appears to be that for the value attribute the diffing should be done with dom.value and not with oldProps.value. If I revert this particular change the issue is fixed in Safari.

[natevw]

Confirmed this is resolved in alpha.3, thanks!