[Webkit-unassigned] [Bug 236937] Keyboard autocorrect (spellcheck) buffer is not reset when clearing text field value

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Tue Aug 15 21:58:01 PDT 2023


https://bugs.webkit.org/show_bug.cgi?id=236937

--- Comment #2 from Teodor <teodor.atroshenko at gmail.com> ---
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`).

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230816/49de5cc6/attachment.htm>


More information about the webkit-unassigned mailing list