Expose props for disabling auto-correct, auto-complete, auto-capitalize (facebookarchive#1035)

flarnie · web-flow · commit 864ecf251262 · 2017-03-30T15:58:16.000-07:00
Wanted: manual testing of this PR. There is some really weird behavior in Android 5.0 when auto-correct happens. More details here; facebookarchive#1010 Setting 'spellCheck' to 'false' didn't seem to be enough to stop this. My quick fix for now is to expose more properties on Draft for controlling autocorrect. This could also be useful to people in general, since there are often complaints about autocorrect on mobile web. Long term we will be addressing the root causes of the bugs with mobile web, but this seems like a useful change regardless. We did some testing with mobile web using these props. Ideally I'd like to get testing done of each prop in each supported browser, and document the effects. If anyone can help verify different behaviors please comment here, otherwise I'll get to it soon. Note that we'll update the documentation once this change is actually included in a released version of Draft.js.
diff --git a/src/component/base/DraftEditor.react.js b/src/component/base/DraftEditor.react.js
@@ -243,6 +243,9 @@ class DraftEditor extends React.Component {
             aria-haspopup={readOnly ? null : this.props.ariaHasPopup}
             aria-label={this.props.ariaLabel}
             aria-owns={readOnly ? null : this.props.ariaOwneeID}
+            autoCapitalize={this.props.autoCapitalize}
+            autoComplete={this.props.autoComplete}
+            autoCorrect={this.props.autoCorrect}
             className={cx('public/DraftEditor/content')}
             contentEditable={!readOnly}
             data-testid={this.props.webDriverTestID}
diff --git a/src/component/base/DraftEditorProps.js b/src/component/base/DraftEditorProps.js
@@ -80,6 +80,11 @@ export type DraftEditorProps = {
 
   tabIndex?: number,
 
+  // exposed especially to help improve mobile web behaviors
+  autoCapitalize?: string,
+  autoComplete?: string,
+  autoCorrect?: string,
+
   ariaActiveDescendantID?: string,
   ariaAutoComplete?: string,
   ariaDescribedBy?: string,
