From 970d9a049f5e8cda9059fdf0b3b59bb28d685299 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Wed, 25 Mar 2020 21:21:32 +0200 Subject: [PATCH 1/7] Add `forceFocus` prop to --- 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 | 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. | +| forceFocus | bool | false | Force displaying input 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..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

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('', () => { }); }); + describe.only('prop: forceFocus', () => { + 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(); From c81dac52bfe942e5c12efd708a554be099dcc356 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Wed, 25 Mar 2020 21:29:07 +0200 Subject: [PATCH 2/7] Commit api static content --- docs/pages/api-docs/form-control.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api-docs/form-control.md b/docs/pages/api-docs/form-control.md index 645cfbd519ecba..80fbd37c9f79f4 100644 --- a/docs/pages/api-docs/form-control.md +++ b/docs/pages/api-docs/form-control.md @@ -50,7 +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. | -| forceFocus | bool | false | Force displaying input in focused state | +| forceFocus | bool | false | 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. | From e5c460e6ab39a7033987fad46a30324a7c733e83 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Fri, 27 Mar 2020 09:14:29 +0200 Subject: [PATCH 3/7] Rename forceFocus to visuallyFocused --- .../src/FormControl/FormControl.d.ts | 2 +- .../material-ui/src/FormControl/FormControl.js | 17 +++++++++-------- .../src/FormControl/FormControl.test.js | 4 ++-- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/material-ui/src/FormControl/FormControl.d.ts b/packages/material-ui/src/FormControl/FormControl.d.ts index 2e5e729cf2ed77..0ab3ed98f9ad0a 100644 --- a/packages/material-ui/src/FormControl/FormControl.d.ts +++ b/packages/material-ui/src/FormControl/FormControl.d.ts @@ -8,7 +8,7 @@ export interface FormControlTypeMap

disabled?: boolean; error?: boolean; fullWidth?: boolean; - forceFocus?: boolean; + visuallyFocused?: 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 b71528ddf2c2f4..b217d98d7cc152 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -69,7 +69,7 @@ const FormControl = React.forwardRef(function FormControl(props, ref) { disabled = false, error = false, fullWidth = false, - forceFocus = false, + visuallyFocused, hiddenLabel = false, margin = 'none', required = false, @@ -84,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; } @@ -105,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; } @@ -120,7 +120,7 @@ const FormControl = React.forwardRef(function FormControl(props, ref) { }); const [_focused, setFocused] = React.useState(false); - const focused = forceFocus || _focused; + const focused = visuallyFocused ?? _focused; if (disabled && focused) { setFocused(false); @@ -231,10 +231,7 @@ 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. */ @@ -261,6 +258,10 @@ FormControl.propTypes = { * The variant to use. */ variant: PropTypes.oneOf(['standard', 'outlined', 'filled']), + /** + * If `true`, the component will be displayed in focused state. + */ + visuallyFocused: PropTypes.bool, }; export default withStyles(styles, { name: 'MuiFormControl' })(FormControl); diff --git a/packages/material-ui/src/FormControl/FormControl.test.js b/packages/material-ui/src/FormControl/FormControl.test.js index 4bd4c890a0411e..c2f404580b4e37 100644 --- a/packages/material-ui/src/FormControl/FormControl.test.js +++ b/packages/material-ui/src/FormControl/FormControl.test.js @@ -109,11 +109,11 @@ describe('', () => { }); }); - describe.only('prop: forceFocus', () => { + describe('prop: visuallyFocused', () => { it('should display input in focused state', () => { const readContext = spy(); const { container } = render( - + , From 06e25fc9e0ae2667b22ca78318a9df861726e66e Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Fri, 27 Mar 2020 09:15:31 +0200 Subject: [PATCH 4/7] Update generated api --- docs/pages/api-docs/form-control.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api-docs/form-control.md b/docs/pages/api-docs/form-control.md index 80fbd37c9f79f4..665b84e0413450 100644 --- a/docs/pages/api-docs/form-control.md +++ b/docs/pages/api-docs/form-control.md @@ -50,13 +50,13 @@ 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. | -| forceFocus | bool | false | 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. | | required | bool | false | If `true`, the label will indicate that the input is required. | | size | 'small'
| 'medium' | | The size of the text field. | | variant | 'standard'
| 'outlined'
| 'filled' | 'standard' | The variant to use. | +| visuallyFocused | bool | | If `true`, the component will be displayed in focused state. | The `ref` is forwarded to the root element. From 875ffd9195e4bb063e3e566c6b682147b327ef2b Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Fri, 27 Mar 2020 14:52:49 +0200 Subject: [PATCH 5/7] Rename to `focused` --- packages/material-ui/src/FormControl/FormControl.d.ts | 2 +- packages/material-ui/src/FormControl/FormControl.js | 11 +++++------ .../material-ui/src/FormControl/FormControl.test.js | 4 ++-- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/material-ui/src/FormControl/FormControl.d.ts b/packages/material-ui/src/FormControl/FormControl.d.ts index 0ab3ed98f9ad0a..656e6c04a35002 100644 --- a/packages/material-ui/src/FormControl/FormControl.d.ts +++ b/packages/material-ui/src/FormControl/FormControl.d.ts @@ -8,7 +8,7 @@ export interface FormControlTypeMap

disabled?: boolean; error?: boolean; fullWidth?: boolean; - visuallyFocused?: 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 b217d98d7cc152..07fdceec6ea3de 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -69,7 +69,7 @@ const FormControl = React.forwardRef(function FormControl(props, ref) { disabled = false, error = false, fullWidth = false, - visuallyFocused, + focused: visuallyFocused, hiddenLabel = false, margin = 'none', required = false, @@ -231,7 +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. */ @@ -258,10 +261,6 @@ FormControl.propTypes = { * The variant to use. */ variant: PropTypes.oneOf(['standard', 'outlined', 'filled']), - /** - * If `true`, the component will be displayed in focused state. - */ - visuallyFocused: PropTypes.bool, }; export default withStyles(styles, { name: 'MuiFormControl' })(FormControl); diff --git a/packages/material-ui/src/FormControl/FormControl.test.js b/packages/material-ui/src/FormControl/FormControl.test.js index c2f404580b4e37..cd734bdc08aa10 100644 --- a/packages/material-ui/src/FormControl/FormControl.test.js +++ b/packages/material-ui/src/FormControl/FormControl.test.js @@ -109,11 +109,11 @@ describe('', () => { }); }); - describe('prop: visuallyFocused', () => { + describe('prop: focused', () => { it('should display input in focused state', () => { const readContext = spy(); const { container } = render( - + , From b367f7752ebbdbbcc14d3ac66900087caa9ca51f Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Fri, 27 Mar 2020 14:59:35 +0200 Subject: [PATCH 6/7] Regenerate api statics --- docs/pages/api-docs/form-control.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/api-docs/form-control.md b/docs/pages/api-docs/form-control.md index 665b84e0413450..9df36c85cb0d59 100644 --- a/docs/pages/api-docs/form-control.md +++ b/docs/pages/api-docs/form-control.md @@ -50,13 +50,13 @@ 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. | | required | bool | false | If `true`, the label will indicate that the input is required. | | size | 'small'
| 'medium' | | The size of the text field. | | variant | 'standard'
| 'outlined'
| 'filled' | 'standard' | The variant to use. | -| visuallyFocused | bool | | If `true`, the component will be displayed in focused state. | The `ref` is forwarded to the root element. From b43f0d5c596f22619d8db7c548c1f4d7bd76eb32 Mon Sep 17 00:00:00 2001 From: Dmitriy Kovalenko Date: Sat, 28 Mar 2020 22:15:42 +0200 Subject: [PATCH 7/7] Replace ?? operator with manual !== undefined --- packages/material-ui/src/FormControl/FormControl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index 07fdceec6ea3de..4512a9741c5f76 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -120,7 +120,7 @@ const FormControl = React.forwardRef(function FormControl(props, ref) { }); const [_focused, setFocused] = React.useState(false); - const focused = visuallyFocused ?? _focused; + const focused = visuallyFocused !== undefined ? visuallyFocused : _focused; if (disabled && focused) { setFocused(false);