Bug 236937 – Keyboard autocorrect (spellcheck) buffer is not reset when clearing text field value

• Status: NEW
• Component: HTML Editing

[Teodor]

Here are a couple of issues from Stack Overflow:
https://stackoverflow.com/questions/18689842/clearing-input-element-in-mobile-safari-with-javascript-does-not-clear-the-ios-a
https://stackoverflow.com/questions/46425476/ios-html-autocorrect-save-previous-value-after-programmaticaly-textarea-clean

And a reproduction case (first field works, second field does not):
https://jsbin.com/zusahev

This is a typical scenario of a text chat:
1. User types in some text, e.g. "Hello"
2. The autocorrect buffer (leftmost box immediately above the keyboard) now says "Hello"
3. User taps on "Send" button, which in turn has a touchstart and/or touchend handler that calls event.preventDefault() to stop the virtual keyboard from closing
4. User types in some more text, e.g. "wolrd" (note: that the word is no longer auto capitalized due to the same issue - it thinks we are still typing in the word from the previous chat message)
5. The autocorrect buffer now says "Hellowolrd", all sensible suggestions disappear
6. User taps on "Send" button
7. User enters another word without any spaces, the buffer appends that word, and so on

I believe this is only visible in WKWebView right now, but I may be wrong. What I mean by this is that the buffer contents are displayed only in WKWebView. Users of Safari will only see the lack of auto capitalization after the first chat message is sent. So if you want to make sure this is actually happening in Safari using jsbin link above, then you can type in just one word (notice how it autocapitalizes) in the second textarea, then hit Button 2, and then type in another word (notice how it does not autocapitalize).

There are multiple things at play here:
1. WKWebView always displays "misspelled words" area above keyboard bug #225092
2. Inability to programmatically reset the spellcheck state bug #48411
3. Change to input value does not trigger spellcheck bug #139473

If 3 is fixed, then everything will just start working (at least that's the expectation).

If 2 is fixed, then developers can add a workaround, where they momentarily disable spellcheck after "reading" the value of the input (re-enabling it after a short delay).

If 1 is fixed, at least we can hide the broken autocorrect buffer from users. This is especially important in apps using WKWebView, as for all practical purposes the user would assume this is a bug in the app and not in Safari.

[Radar WebKit Bug Importer]

<rdar://problem/89243629>

[Teodor]

I found a workaround. This one is specific to Quill, but I've encountered this issue with different libraries and without them, so minor changes would be needed to apply this to anything else but Quill.

```html
<input id="flick-target" type="text" tabindex="-1" />
<quill-element /> <!-- Insert it however you are used to -->
```

```css
.flick-target {
  display: block;
  width: 0;
  height: 0;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
}
```

```js
if (platform.is.ios) { // Use your favorite way of checking if the device is running your favorite mobile OS
  quill.on('text-change', (delta, previousDelta) => {
    if (isEmpty(delta)) { // Use your favorite way of checking if supplied Delta/Text is empty
      flickFocus()
    } else if (isNewLine(delta, previousDelta)) { // Use your favorite way of checking is new line was *just entered*
      flickFocus(quill.getSelection())
    }
  })
}

function flickFocus(selectionTarget) {
  $('#flick-target').focus()

  quill.root.style.opacity = 0 // Make contentEditable element transparent - prevents page flicker when refocusing

  requestAnimationFrame(() => {
    quill.root.focus() // Return focus back to Quill contentEditable

    if (selectionTarget) {
      quill.setSelection(selectionTarget)
    }

    setTimeout(() => {
      quill.root.style.opacity = 1 // Restore visibility on next frame (may take up to 2 frames = 32ms)
    })
  })
}

function isEmpty(delta) { // Tweak this as you see fit
  return delta.ops.length === 1 && delta.ops[0].insert == '\n'
}

function isNewLine(delta, previousDelta) { // Tweak this as you see fit
  return delta.ops.length > previousDelta.ops.length
}
```

Instead of checking for new line entry you can also listen for Enter `keydown` event (`e.key === 'Enter' || e.keyCode === 13`).