handle native selectionchange event, closes #1135 (#1441)

packages/slate-react/package.json

@@ -12,6 +12,7 @@
     "is-in-browser": "^1.1.3",
     "is-window": "^1.0.2",
     "keycode": "^2.1.2",
+    "lodash.throttle": "^4.1.1",
     "prop-types": "^15.5.8",
     "react-immutable-proptypes": "^2.1.0",
     "react-portal": "^3.1.0",

packages/slate-react/src/components/content.js

@@ -4,6 +4,7 @@ import React from 'react'
 import Types from 'prop-types'
 import getWindow from 'get-window'
 import logger from 'slate-dev-logger'
+import throttle from 'lodash.throttle'
 
 import EVENT_HANDLERS from '../constants/event-handlers'
 import Node from './node'
@@ -93,8 +94,11 @@ class Content extends React.Component {
 
   componentDidMount = () => {
     const { editor } = this.props
+    const window = getWindow(this.element)
 
-    // Restrict scoped of `beforeinput` to mobile.
+    window.document.addEventListener('selectionchange', this.onNativeSelectionChange)
+
+    // COMPAT: Restrict scope of `beforeinput` to mobile.
     if ((IS_IOS || IS_ANDROID) && SUPPORTED_EVENTS.beforeinput) {
       this.element.addEventListener('beforeinput', this.onNativeBeforeInput)
     }
@@ -111,7 +115,11 @@ class Content extends React.Component {
    */
 
   componentWillUnmount() {
-    // Restrict scoped of `beforeinput` to mobile.
+    const window = getWindow(this.element)
+
+    window.document.removeEventListener('selectionchange', this.onNativeSelectionChange)
+
+    // COMPAT: Restrict scope of `beforeinput` to mobile.
     if ((IS_IOS || IS_ANDROID) && SUPPORTED_EVENTS.beforeinput) {
       this.element.removeEventListener('beforeinput', this.onNativeBeforeInput)
     }
@@ -386,6 +394,25 @@ class Content extends React.Component {
     })
   }
 
+  /**
+   * On native `selectionchange` event, trigger the `onSelect` handler. This is
+   * needed to account for React's `onSelect` being non-standard and not firing
+   * until after a selection has been released. This causes issues in situations
+   * where another change happens while a selection is being made.
+   *
+   * @param {Event} event
+   */
+
+  onNativeSelectionChange = throttle((event) => {
+    if (this.props.readOnly) return
+
+    const window = getWindow(event.target)
+    const { activeElement } = window.document
+    if (activeElement !== this.element) return
+
+    this.props.onSelect(event)
+  }, 100)
+
   /**
    * Render the editor content.
    *

yarn.lock

@@ -4154,6 +4154,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
 lodash@^4.0.0, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"