Add a preventScroll prop

Summary:
Browser scrolls to native editors when they get inserted into the DOM. Draft replicates that behavior. However, that behavior is occasionally not what we want at all.

As a result of this, we sometimes have "scroll wars" where different parts of the product code try to restore scroll after others change it. This is a source of bugs.

This adds a first-class way to disable this behavior. I named the prop a bit generically so that if I find more such cases, I can disable them too.

Reviewed By: steveluscher

Differential Revision: D19568181

fbshipit-source-id: ed4db22abebbdae1b11d84e1bf6d7772a840b3da

Author: gaearon

src/component/base/DraftEditor.react.js

@@ -328,6 +328,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
       customStyleFn,
       customStyleMap,
       editorState,
+      preventScroll,
       readOnly,
       textAlignment,
       textDirectionality,
@@ -369,6 +370,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
       customStyleFn,
       editorKey: this._editorKey,
       editorState,
+      preventScroll,
       textDirectionality,
     };
 

src/component/base/DraftEditorProps.js

@@ -76,6 +76,10 @@ export type DraftEditorProps = {
   // or null if no command should be invoked.
   keyBindingFn: (e: SyntheticKeyboardEvent<>) => ?string,
 
+  // Set whether the editor should prevent scrolling into view on mount
+  // if it happens offscreen. By default, `false` to match the native behavior.
+  preventScroll?: boolean,
+
   // Set whether the `DraftEditor` component should be editable. Useful for
   // temporarily disabling edit behavior or allowing `DraftEditor` rendering
   // to be used for consumption purposes.

src/component/contents/DraftEditorBlock.react.js

@@ -49,6 +49,7 @@ type Props = {
   direction: BidiDirection,
   forceSelection: boolean,
   offsetKey: string,
+  preventScroll?: boolean,
   selection: SelectionState,
   startIndent?: boolean,
   tree: List<any>,
@@ -96,6 +97,9 @@ class DraftEditorBlock extends React.Component<Props> {
    * scroll parent.
    */
   componentDidMount(): void {
+    if (this.props.preventScroll) {
+      return;
+    }
     const selection = this.props.selection;
     const endKey = selection.getEndKey();
     if (!selection.getHasFocus() || endKey !== this.props.block.getKey()) {

src/component/contents/DraftEditorContents-core.react.js

@@ -36,6 +36,7 @@ type Props = {
   customStyleMap?: Object,
   editorKey?: string,
   editorState: EditorState,
+  preventScroll?: boolean,
   textDirectionality?: BidiDirection,
 };
 
@@ -132,6 +133,7 @@ class DraftEditorContents extends React.Component<Props> {
       customStyleFn,
       editorState,
       editorKey,
+      preventScroll,
       textDirectionality,
     } = this.props;
 
@@ -175,6 +177,7 @@ class DraftEditorContents extends React.Component<Props> {
         direction,
         forceSelection,
         offsetKey,
+        preventScroll,
         selection,
         tree: editorState.getBlockTree(key),
       };