From 970d9a049f5e8cda9059fdf0b3b59bb28d685299 Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Wed, 25 Mar 2020 21:21:32 +0200
Subject: [PATCH] Add `forceFocus` prop to <FormControl />

---
 docs/pages/api-docs/form-control.md              |  1 +
 .../material-ui/src/FormControl/FormControl.d.ts |  1 +
 .../material-ui/src/FormControl/FormControl.js   | 12 +++++++++---
 .../src/FormControl/FormControl.test.js          | 16 ++++++++++++++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/docs/pages/api-docs/form-control.md b/docs/pages/api-docs/form-control.md
index 9299b16968989b..645cfbd519ecba 100644
--- a/docs/pages/api-docs/form-control.md
+++ b/docs/pages/api-docs/form-control.md
@@ -50,6 +50,7 @@ You can find one composition example below and more going to [the demos](/compon
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the label, input and helper text should be displayed in a disabled state. |
 | <span class="prop-name">error</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the label should be displayed in an error state. |
+| <span class="prop-name">forceFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Force displaying input in focused state |
 | <span class="prop-name">fullWidth</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the component will take up the full width of its container. |
 | <span class="prop-name">hiddenLabel</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the label will be hidden. This is used to increase density for a `FilledInput`. Be sure to add `aria-label` to the `input` element. |
 | <span class="prop-name">margin</span> | <span class="prop-type">'none'<br>&#124;&nbsp;'dense'<br>&#124;&nbsp;'normal'</span> | <span class="prop-default">'none'</span> | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
diff --git a/packages/material-ui/src/FormControl/FormControl.d.ts b/packages/material-ui/src/FormControl/FormControl.d.ts
index 09dca4729f4df2..2e5e729cf2ed77 100644
--- a/packages/material-ui/src/FormControl/FormControl.d.ts
+++ b/packages/material-ui/src/FormControl/FormControl.d.ts
@@ -8,6 +8,7 @@ export interface FormControlTypeMap<P = {}, D extends React.ElementType = 'div'>
     disabled?: boolean;
     error?: boolean;
     fullWidth?: boolean;
+    forceFocus?: boolean;
     hiddenLabel?: boolean;
     margin?: PropTypes.Margin;
     required?: boolean;
diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js
index 1e6d750058769a..b71528ddf2c2f4 100644
--- a/packages/material-ui/src/FormControl/FormControl.js
+++ b/packages/material-ui/src/FormControl/FormControl.js
@@ -69,6 +69,7 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
     disabled = false,
     error = false,
     fullWidth = false,
+    forceFocus = false,
     hiddenLabel = false,
     margin = 'none',
     required = false,
@@ -83,7 +84,7 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
     let initialAdornedStart = false;
 
     if (children) {
-      React.Children.forEach(children, (child) => {
+      React.Children.forEach(children, child => {
         if (!isMuiElement(child, ['Input', 'Select'])) {
           return;
         }
@@ -104,7 +105,7 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
     let initialFilled = false;
 
     if (children) {
-      React.Children.forEach(children, (child) => {
+      React.Children.forEach(children, child => {
         if (!isMuiElement(child, ['Input', 'Select'])) {
           return;
         }
@@ -118,7 +119,8 @@ const FormControl = React.forwardRef(function FormControl(props, ref) {
     return initialFilled;
   });
 
-  const [focused, setFocused] = React.useState(false);
+  const [_focused, setFocused] = React.useState(false);
+  const focused = forceFocus || _focused;
 
   if (disabled && focused) {
     setFocused(false);
@@ -229,6 +231,10 @@ FormControl.propTypes = {
    * If `true`, the label should be displayed in an error state.
    */
   error: PropTypes.bool,
+  /**
+   * If `true`, the component will be displayed in focused state.
+   */
+  forceFocus: PropTypes.bool,
   /**
    * If `true`, the component will take up the full width of its container.
    */
diff --git a/packages/material-ui/src/FormControl/FormControl.test.js b/packages/material-ui/src/FormControl/FormControl.test.js
index 19ee262a20d5b3..4bd4c890a0411e 100644
--- a/packages/material-ui/src/FormControl/FormControl.test.js
+++ b/packages/material-ui/src/FormControl/FormControl.test.js
@@ -109,6 +109,22 @@ describe('<FormControl />', () => {
     });
   });
 
+  describe.only('prop: forceFocus', () => {
+    it('should display input in focused state', () => {
+      const readContext = spy();
+      const { container } = render(
+        <FormControl forceFocus>
+          <Input />
+          <TestComponent contextCallback={readContext} />
+        </FormControl>,
+      );
+
+      expect(readContext.args[0][0]).to.have.property('focused', true);
+      container.querySelector('input').blur();
+      expect(readContext.args[0][0]).to.have.property('focused', true);
+    });
+  });
+
   describe('input', () => {
     it('should be filled when a value is set', () => {
       const readContext = spy();