From db9bea2184199445dfcd25f99f9a351ac1d308a3 Mon Sep 17 00:00:00 2001
From: Matthew Holloway <matthew@springload.co.nz>
Date: Tue, 16 Jul 2019 16:36:17 -0700
Subject: [PATCH] Adding 'preserveSelectionOnBlur' prop (#2128)

Summary:
**Summary**

This adds a `preserveSelectionOnBlur` prop as per https://github.com/facebook/draft-js/issues/2123

**Test Plan**

Tests were added for the two possible scenarios. I'm not sure how much to mock in this test because it is just testing a specific branch of code, so I've faked certain details like the rangeCount.

What do you think mrkev claudiopro ?
Pull Request resolved: https://github.com/facebook/draft-js/pull/2128

Reviewed By: claudiopro

Differential Revision: D16270879

Pulled By: mrkev

fbshipit-source-id: 304af92c1211b8ff95741bff434b4fe3c4b6dd7d
---
 src/component/base/DraftEditorProps.js        |   7 +-
 .../edit/__tests__/editOnBlur-test.js         | 104 ++++++++++++++++++
 src/component/handlers/edit/editOnBlur.js     |   7 +-
 3 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 src/component/handlers/edit/__tests__/editOnBlur-test.js

diff --git a/src/component/base/DraftEditorProps.js b/src/component/base/DraftEditorProps.js
index 955feaf72c..891b32e477 100644
--- a/src/component/base/DraftEditorProps.js
+++ b/src/component/base/DraftEditorProps.js
@@ -182,13 +182,16 @@ export type DraftEditorProps = {
 
   customAttrs?: Object,
 
+  // When the Editor loses focus (blurs) text selections are cleared
+  // by default to mimic <textarea> behaviour, however in some situations
+  // users may wish to preserve native behaviour.
+  preserveSelectionOnBlur?: boolean,
+
   // Overrides for cut, copy & paste, which can be used to implement custom
   // behavior like entity cut/copy/paste (see PR #1784)."
   onPaste?: (DraftEditor, SyntheticClipboardEvent<>) => void,
   onCut?: (DraftEditor, SyntheticClipboardEvent<>) => void,
   onCopy?: (DraftEditor, SyntheticClipboardEvent<>) => void,
-
-  customAttrs?: Object,
 };
 
 export type DraftEditorDefaultProps = {
diff --git a/src/component/handlers/edit/__tests__/editOnBlur-test.js b/src/component/handlers/edit/__tests__/editOnBlur-test.js
new file mode 100644
index 0000000000..ec94ca5b2f
--- /dev/null
+++ b/src/component/handlers/edit/__tests__/editOnBlur-test.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails oncall+draft_js
+ * @format
+ */
+
+'use strict';
+
+jest.disableAutomock();
+
+const ContentBlock = require('ContentBlock');
+const ContentState = require('ContentState');
+const EditorState = require('EditorState');
+
+const onBlur = require('editOnBlur');
+
+const getEditorState = (text: string = 'Arsenal') => {
+  return EditorState.createWithContent(
+    ContentState.createFromBlockArray([
+      new ContentBlock({
+        key: 'a',
+        text,
+      }),
+    ]),
+  );
+};
+
+const getBlurEvent = data => ({
+  data,
+});
+
+function withGlobalGetSelectionAs(getSelectionValue = {}, callback) {
+  const oldGetSelection = global.getSelection;
+  try {
+    global.getSelection = () => {
+      return getSelectionValue;
+    };
+    callback();
+  } finally {
+    global.getSelection = oldGetSelection;
+  }
+}
+
+test('editor removes selection on blur (default behaviour)', () => {
+  const anchorNodeText = 'react draftjs';
+  const anchorNode = document.createTextNode(anchorNodeText);
+  const globalSelection = {
+    anchorNode,
+    focusNode: anchorNode,
+    removeAllRanges: jest.fn(),
+    rangeCount: 1,
+  };
+
+  const editorNode = document.createElement('div');
+  editorNode.appendChild(anchorNode);
+
+  withGlobalGetSelectionAs(globalSelection, () => {
+    const editorState = getEditorState(anchorNodeText);
+    const editor = {
+      _latestEditorState: editorState,
+      props: {
+        preserveSelectionOnBlur: false,
+      },
+      editor: editorNode,
+    };
+
+    onBlur(editor, getBlurEvent());
+
+    expect(globalSelection.removeAllRanges).toHaveBeenCalledTimes(1);
+  });
+});
+
+test('editor preserves selection on blur', () => {
+  const anchorNodeText = 'react draftjs';
+  const anchorNode = document.createTextNode(anchorNodeText);
+  const globalSelection = {
+    anchorNode,
+    focusNode: anchorNode,
+    removeAllRanges: jest.fn(),
+    rangeCount: 1,
+  };
+
+  const editorNode = document.createElement('div');
+  editorNode.appendChild(anchorNode);
+
+  withGlobalGetSelectionAs(globalSelection, () => {
+    const editorState = getEditorState(anchorNodeText);
+    const editor = {
+      _latestEditorState: editorState,
+      props: {
+        preserveSelectionOnBlur: true,
+      },
+      editor: editorNode,
+    };
+
+    onBlur(editor, getBlurEvent());
+
+    expect(globalSelection.removeAllRanges).toHaveBeenCalledTimes(0);
+  });
+});
diff --git a/src/component/handlers/edit/editOnBlur.js b/src/component/handlers/edit/editOnBlur.js
index b70ba04433..5260a52fd5 100644
--- a/src/component/handlers/edit/editOnBlur.js
+++ b/src/component/handlers/edit/editOnBlur.js
@@ -27,7 +27,12 @@ function editOnBlur(editor: DraftEditor, e: SyntheticEvent<>): void {
   // We therefore force the issue to be certain, checking whether the active
   // element is `body` to force it when blurring occurs within the window (as
   // opposed to clicking to another tab or window).
-  if (getActiveElement() === document.body) {
+  // However if users wish to override this behaviour they can provide
+  // a prop preserveSelectionOnBlur of `true`.
+  if (
+    !editor.props.preserveSelectionOnBlur &&
+    getActiveElement() === document.body
+  ) {
     const selection = global.getSelection();
     const editorNode = editor.editor;
     if (