Quill: [iOS] No capitalization on entering a new line or deleting all existing text manually with backspace.

Created on 29 May 2019  路  2Comments  路  Source: quilljs/quill

First letter is not capitalized in iOS browser when entering a new line or deleting all existing text manually with backspace.

Steps for Reproduction

  1. Visit https://quilljs.com/playground on an iOS device
  2. Type some text then delete all text or enter a new line
  3. Type some more text

Expected behavior:
When user starts typing again after entering a new line or deleting text, the first letter is capitalized.

Actual behavior:
First letter is not capitalized.

Platforms:
Tested on iOS 12.2

Version:
1.3.6

Most helpful comment

This is happening to me as well. Another thing I've noticed is that the predictive text suggestions will keep the last letter that was deleted.

Reproduction steps

  1. Visit https://quilljs.com/playground on an iOS device
  2. Type some text then delete all text or enter a new line
  3. Type a letter
  4. delete it
  5. type another letter
  6. the predictive text now has appending letters

Simulator Screen Shot - iPhone X - 2019-08-16 at 11 48 52

All 2 comments

This is happening to me as well. Another thing I've noticed is that the predictive text suggestions will keep the last letter that was deleted.

Reproduction steps

  1. Visit https://quilljs.com/playground on an iOS device
  2. Type some text then delete all text or enter a new line
  3. Type a letter
  4. delete it
  5. type another letter
  6. the predictive text now has appending letters

Simulator Screen Shot - iPhone X - 2019-08-16 at 11 48 52

Yeah, this is a tough one for usability. I put together a quick and dirty hack. It can be extended to have heuristics around backspacing etc.

q.on('text-change', (d, _, source) => {
  if (source !== 'api') {
    const sel = q.getSelection();
    const [line, ] = q.getLine(sel.index);

    if (!line.children) { return }

    const val = line.children.head.value();
    if (val.length && val[0] === val[0].toLowerCase()) {
      q.updateContents(
        new delta().retain(q.getIndex(line.children.head)).delete(1).insert(val[0].toUpperCase())
        , 'api')
    }
  }
});
Was this page helpful?
0 / 5 - 0 ratings