Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Commit

Permalink
Add a preventScroll prop
Browse files Browse the repository at this point in the history
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
  • Loading branch information
gaearon authored and facebook-github-bot committed Jan 27, 2020
1 parent 8c50042 commit 3ba907b
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/component/base/DraftEditor.react.js
Expand Up @@ -328,6 +328,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
customStyleFn,
customStyleMap,
editorState,
preventScroll,
readOnly,
textAlignment,
textDirectionality,
Expand Down Expand Up @@ -369,6 +370,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
customStyleFn,
editorKey: this._editorKey,
editorState,
preventScroll,
textDirectionality,
};

Expand Down
4 changes: 4 additions & 0 deletions src/component/base/DraftEditorProps.js
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions src/component/contents/DraftEditorBlock.react.js
Expand Up @@ -49,6 +49,7 @@ type Props = {
direction: BidiDirection,
forceSelection: boolean,
offsetKey: string,
preventScroll?: boolean,
selection: SelectionState,
startIndent?: boolean,
tree: List<any>,
Expand Down Expand Up @@ -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()) {
Expand Down
3 changes: 3 additions & 0 deletions src/component/contents/DraftEditorContents-core.react.js
Expand Up @@ -36,6 +36,7 @@ type Props = {
customStyleMap?: Object,
editorKey?: string,
editorState: EditorState,
preventScroll?: boolean,
textDirectionality?: BidiDirection,
};

Expand Down Expand Up @@ -132,6 +133,7 @@ class DraftEditorContents extends React.Component<Props> {
customStyleFn,
editorState,
editorKey,
preventScroll,
textDirectionality,
} = this.props;

Expand Down Expand Up @@ -175,6 +177,7 @@ class DraftEditorContents extends React.Component<Props> {
direction,
forceSelection,
offsetKey,
preventScroll,
selection,
tree: editorState.getBlockTree(key),
};
Expand Down

0 comments on commit 3ba907b

Please sign in to comment.