diff --git a/docs/pages/api-docs/form-control.md b/docs/pages/api-docs/form-control.md index 9299b16968989b..9df36c85cb0d59 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 | component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | disabled | bool | false | If `true`, the label, input and helper text should be displayed in a disabled state. | | error | bool | false | If `true`, the label should be displayed in an error state. | +| focused | bool | | If `true`, the component will be displayed in focused state. | | fullWidth | bool | false | If `true`, the component will take up the full width of its container. | | hiddenLabel | bool | false | 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. | | margin | 'none'
| 'dense'
| 'normal'
| 'none' | 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..656e6c04a35002 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

disabled?: boolean; error?: boolean; fullWidth?: boolean; + focused?: 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..4512a9741c5f76 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, + 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. */ diff --git a/packages/material-ui/src/FormControl/FormControl.test.js b/packages/material-ui/src/FormControl/FormControl.test.js index 19ee262a20d5b3..cd734bdc08aa10 100644 --- a/packages/material-ui/src/FormControl/FormControl.test.js +++ b/packages/material-ui/src/FormControl/FormControl.test.js @@ -109,6 +109,22 @@ describe('', () => { }); }); + describe('prop: focused', () => { + it('should display input in focused state', () => { + const readContext = spy(); + const { container } = render( + + + + , + ); + + 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();