Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Android keyboard suggestions are not properly inserted #2176

Closed
adamsanderson opened this issue Sep 7, 2019 · 3 comments
Closed

Android keyboard suggestions are not properly inserted #2176

adamsanderson opened this issue Sep 7, 2019 · 3 comments

Comments

@adamsanderson
Copy link

adamsanderson commented Sep 7, 2019

Do you want to request a feature or report a bug?
Bug

What is the current behavior?

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started:

Using an Android device with the stock GBoard keyboard:

  1. Type "This is just fine"
  2. Select "just"
  3. Make the text bold
  4. Click into "just"
  5. Accept a suggestion, for instance "Justin"

android keyboard suggestions

What is the expected behavior?
Expected: The bold "just" should be replaced with the suggestion.
Actual: The result is "This is Justinst fine"

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
draft-js master branch, Android w/ Chrome 76.x

At a guess is there an off by one error at leaf boundaries w/ the mutation observer? This doesn't repro in a plain contenteditable. I'm really interested in helping get Android better supported, but could use some suggestions for where to look.

@jalners
Copy link

jalners commented Sep 9, 2019

This incorrect behaviour is similar to #2171. DraftJS works bad with handling two mutations in two subsequent text nodes.

@jalners
Copy link

jalners commented Sep 9, 2019

You can reproduce this by using document.execCommand('insertText', false, 'text for replace') API. Browsers use the similar API for replacing in native spellcheckers and for replacing on mobile devices.

  • Go to https://draftjs.org/.
  • Open the browser console.
  • Type the next text in the editor: Hello there.
  • Add bold markup for t in there word.
  • Select there word.
  • Go to the console and execute next function: document.execCommand('insertText', false, 'all').
  • You will see the next incorrect text: allhere..
  • Place a cursor at the end of the string.
  • Press Ctrl/Command + A (Select All).
  • Enter a letter.
  • Take a look at the console. There will be an error - Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node..
  • Now editor works incorrectly for each key press.

@jalners
Copy link

jalners commented Jan 19, 2021

Hello @adamsanderson. Why have you closed this bug? Is it fixed already?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants