Fix for workchat composer cursor jumping

Summary:
As figured out in T47552048, the issue of cursor jumping is happening because the draft editor's selection state is not in the correct state. After digging in, I discovered that the draft editor manages this state through the contenteditable div's onSelect event, but it is not being fired in certain cases. So I am changing the code to update the selection state when mouseUp and keyUp events are fired, and this fixes the issue as these events are fired even in those cases where onSelect is not. Although this means that there are some redundant updates to the selection state, this shouldn't cause any bugs.

I suspect this is happening because of some change/bug on how chrome is firing events on contenteditable, since it doesn't repro on firefox and also I couldn't find any code changes that match the bug timeline.

Reviewed By: claudiopro

Differential Revision: D17054885

fbshipit-source-id: 06b1e96629828d4cb1c9cab36c2711c6464f1f3c

src/component/handlers/edit/DraftEditorEditHandler.js

@@ -11,6 +11,10 @@
 
 'use strict';
 
+import type DraftEditor from 'DraftEditor.react';
+
+const UserAgent = require('UserAgent');
+
 const onBeforeInput = require('editOnBeforeInput');
 const onBlur = require('editOnBlur');
 const onCompositionStart = require('editOnCompositionStart');
@@ -24,6 +28,12 @@ const onKeyDown = require('editOnKeyDown');
 const onPaste = require('editOnPaste');
 const onSelect = require('editOnSelect');
 
+const isChrome = UserAgent.isBrowser('Chrome');
+
+const selectionHandler: (e: DraftEditor) => void = isChrome
+  ? onSelect
+  : e => {};
+
 const DraftEditorEditHandler = {
   onBeforeInput,
   onBlur,
@@ -37,6 +47,12 @@ const DraftEditorEditHandler = {
   onKeyDown,
   onPaste,
   onSelect,
+  // In certain cases, contenteditable on chrome does not fire the onSelect
+  // event, causing problems with cursor positioning. Therefore, the selection
+  // state update handler is added to more events to ensure that the selection
+  // state is always synced with the actual cursor positions.
+  onMouseUp: selectionHandler,
+  onKeyUp: selectionHandler,
 };
 
 module.exports = DraftEditorEditHandler;