Fixed issue where virtual keyboard closes when resynchronizing selection in Chrome on Android (#3866)

* Fixed issue where virtual keyboard closes when resynchronizing selection

* Fixed lint issue

* Added inversion of start-end to end-start when range is backwards

packages/slate-react/src/components/editable.tsx

@@ -33,7 +33,6 @@ import {
   isDOMText,
   DOMStaticRange,
   isPlainTextOnlyPaste,
-  setReverseDomSelection,
 } from '../utils/dom'
 import {
   EDITOR_TO_ELEMENT,
@@ -180,21 +179,32 @@ export const Editable = (props: EditableProps) => {
     // Otherwise the DOM selection is out of sync, so update it.
     const el = ReactEditor.toDOMNode(editor, editor)
     state.isUpdatingSelection = true
-    domSelection.removeAllRanges()
 
     const newDomRange = selection && ReactEditor.toDOMRange(editor, selection)
 
     if (newDomRange) {
       if (Range.isBackward(selection!)) {
-        setReverseDomSelection(newDomRange, domSelection)
+        domSelection.setBaseAndExtent(
+          newDomRange.endContainer,
+          newDomRange.endOffset,
+          newDomRange.startContainer,
+          newDomRange.startOffset
+        )
       } else {
-        domSelection.addRange(newDomRange!)
+        domSelection.setBaseAndExtent(
+          newDomRange.startContainer,
+          newDomRange.startOffset,
+          newDomRange.endContainer,
+          newDomRange.endOffset
+        )
       }
       const leafEl = newDomRange.startContainer.parentElement!
       scrollIntoView(leafEl, {
         scrollMode: 'if-needed',
         boundary: el,
       })
+    } else {
+      domSelection.removeAllRanges()
     }
 
     setTimeout(() => {

packages/slate-react/src/utils/dom.ts

@@ -174,24 +174,3 @@ export const getPlainText = (domNode: DOMNode) => {
 
   return text
 }
-
-/**
- * there is no way to create a reverse DOM Range using Range.setStart/setEnd
- * according to https://dom.spec.whatwg.org/#concept-range-bp-set.
- * Luckily it's possible to create a reverse selection via Selection.extend
- *
- * Note: Selection.extend is not implement in any version of IE (up to and including version 11)
- */
-
-export const setReverseDomSelection = (
-  domRange: DOMRange,
-  domSelection: Selection
-) => {
-  const newRange = domRange.cloneRange()
-  // collapses the range to end
-  newRange.collapse()
-  // set both anchor and focus of the selection to domRange's focus
-  domSelection.addRange(newRange)
-  // moves the focus of the selection to domRange's anchor
-  domSelection.extend(domRange.startContainer, domRange.startOffset)
-}