Cursor in Textfield jumps to end of text when editing on Safari

[natesilva]

Hi! This is an error report for the Textfield when used on Safari (iOS or macOS).

This can be demo’ed with the Textfield inputs on https://sveltematerialui.com/demo/textfield/.

To reproduce:

1. In Safari, type some text into a <Textfield>.
2. Move your insertion point back to the middle of the text you just typed.
3. Make a change, such as typing or deleting a character.

Expected results:

• should edit text normally

Actual results:

• insertion point jumps to the end of the text

[phelbas]

The first answer may help ? https://stackoverflow.com/questions/46000544/react-controlled-input-cursor-jumps

[volksvargas]

change your @smui/textfield/Input.svelte file so that the valueUpdater function looks like this:

function valueUpdater(e) {

const start = e.target.selectionStart;
const end = e.target.selectionEnd;

switch (type) {
  case 'number':
  case 'range':
    value = toNumber(e.target.value);
    break;
  case 'file':
    files = e.target.files;
  // Fall through.
  default:
    value = e.target.value;
    break;
}

requestAnimationFrame(() => {
  e.target.selectionStart = start;
  e.target.selectionEnd = end;
});

}

[hperrin]

Is this regarding desktop Safari?