[TextField] Add focused prop (#20276)

Author: dmtrKovalenko

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">focused</span> | <span class="prop-type">bool</span> |  | If `true`, the component will be displayed 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. |

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;
+    focused?: boolean;
     hiddenLabel?: boolean;
     margin?: PropTypes.Margin;
     required?: boolean;

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,
+    focused: visuallyFocused,
     hiddenLabel = false,
     margin = 'none',
     required = false,
@@ -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 = visuallyFocused !== undefined ? visuallyFocused : _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.
+   */
+  focused: PropTypes.bool,
   /**
    * If `true`, the component will take up the full width of its container.
    */

packages/material-ui/src/FormControl/FormControl.test.js

@@ -109,6 +109,22 @@ describe('<FormControl />', () => {
     });
   });
 
+  describe('prop: focused', () => {
+    it('should display input in focused state', () => {
+      const readContext = spy();
+      const { container } = render(
+        <FormControl focused>
+          <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();