From fe2ecef12e47ce30ef77c3e35d956c485415668e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 1 Nov 2018 22:06:02 +0100 Subject: [PATCH 1/3] [InputBase] Remove legacy lifecycle methods WARNING: Fix might be considered breaking --- .../material-ui/src/InputBase/InputBase.js | 53 ++++++------------- 1 file changed, 17 insertions(+), 36 deletions(-) diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index 1576da0f511391..c3993f70c353db 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -154,47 +154,21 @@ export function formControlState({ props, states, context }) { * It contains a load of style reset and some state logic. */ class InputBase extends React.Component { + static getDerivedStateFromProps(props, state) { + // The blur won't fire when the disabled state is set on a focused input. + // We need to book keep the focused state manually. + if (props.disabled && state.focused) { + return { focused: false }; + } + return null; + } + constructor(props, context) { super(props, context); this.isControlled = props.value != null; if (this.isControlled) { this.checkDirty(props); } - - const componentWillReceiveProps = (nextProps, nextContext) => { - // The blur won't fire when the disabled state is set on a focused input. - // We need to book keep the focused state manually. - if ( - !formControlState({ props: this.props, context: this.context, states: ['disabled'] }) - .disabled && - formControlState({ props: nextProps, context: nextContext, states: ['disabled'] }).disabled - ) { - this.setState({ - focused: false, - }); - } - }; - - const componentWillUpdate = (nextProps, nextState, nextContext) => { - // Book keep the focused state. - if ( - !formControlState({ props: this.props, context: this.context, states: ['disabled'] }) - .disabled && - formControlState({ props: nextProps, context: nextContext, states: ['disabled'] }).disabled - ) { - const { muiFormControl } = this.context; - if (muiFormControl && muiFormControl.onBlur) { - muiFormControl.onBlur(); - } - } - }; - - /* eslint-disable no-underscore-dangle */ - this.componentWillReceiveProps = componentWillReceiveProps; - this.componentWillReceiveProps.__suppressDeprecationWarning = true; - this.componentWillUpdate = componentWillUpdate; - this.componentWillUpdate.__suppressDeprecationWarning = true; - /* eslint-enable no-underscore-dangle */ } state = { @@ -215,7 +189,14 @@ class InputBase extends React.Component { } } - componentDidUpdate() { + componentDidUpdate(prevProps) { + // Book keep the focused state. + if (!prevProps.disabled && this.props.disabled) { + const { muiFormControl } = this.context; + if (muiFormControl && muiFormControl.onBlur) { + muiFormControl.onBlur(); + } + } if (this.isControlled) { this.checkDirty(this.props); } // else performed in the onChange From d9ff7179dd5c8c784f0630d1729ac30869249be1 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 1 Nov 2018 23:19:41 +0100 Subject: [PATCH 2/3] [InputBase] Fix focused state not being updated when context changed --- packages/material-ui/src/FormControl/FormControl.js | 7 +++++++ packages/material-ui/src/InputBase/InputBase.js | 6 ++++-- packages/material-ui/src/InputBase/InputBase.test.js | 12 ++++++++++++ 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index cb0d64548f5c82..3e94a6e66bc87e 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -48,6 +48,13 @@ export const styles = { * ⚠️ Only one input can be used within a FormControl. */ class FormControl extends React.Component { + static getDerivedStateFromProps(props, state) { + if (props.disabled && state.focused) { + return { focused: false }; + } + return null; + } + constructor(props) { super(); diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index c3993f70c353db..d4ec58b612193b 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -335,13 +335,15 @@ class InputBase extends React.Component { states: ['disabled', 'error', 'margin', 'required', 'filled'], }); + const focused = muiFormControl ? muiFormControl.focused : this.state.focused; + const className = classNames( classes.root, { [classes.disabled]: fcs.disabled, [classes.error]: fcs.error, [classes.fullWidth]: fullWidth, - [classes.focused]: this.state.focused, + [classes.focused]: focused, [classes.formControl]: muiFormControl, [classes.marginDense]: fcs.margin === 'dense', [classes.multiline]: multiline, @@ -405,7 +407,7 @@ class InputBase extends React.Component { ? renderPrefix({ ...fcs, startAdornment, - focused: this.state.focused, + focused, }) : null} {startAdornment} diff --git a/packages/material-ui/src/InputBase/InputBase.test.js b/packages/material-ui/src/InputBase/InputBase.test.js index dd35575b615b89..b0d969d08dfdf9 100644 --- a/packages/material-ui/src/InputBase/InputBase.test.js +++ b/packages/material-ui/src/InputBase/InputBase.test.js @@ -368,6 +368,18 @@ describe('', () => { assert.strictEqual(input.props().required, true); }); }); + + describe('focused', () => { + it('prioritizes context focus', () => { + wrapper.setState({ focused: true }); + + setFormControlContext({ focused: false }); + assert.strictEqual(wrapper.hasClass(classes.focused), false); + + setFormControlContext({ focused: true }); + assert.strictEqual(wrapper.hasClass(classes.focused), true); + }); + }); }); describe('componentDidMount', () => { From 7f4c5563292b7e0581680170e9b74cb2428ced38 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 2 Nov 2018 09:13:07 +0100 Subject: [PATCH 3/3] [FormControl] Add tests for gDSFP --- packages/material-ui/src/FormControl/FormControl.test.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/material-ui/src/FormControl/FormControl.test.js b/packages/material-ui/src/FormControl/FormControl.test.js index 72854ca18d720b..fe2a86d9e4f6f7 100644 --- a/packages/material-ui/src/FormControl/FormControl.test.js +++ b/packages/material-ui/src/FormControl/FormControl.test.js @@ -78,6 +78,15 @@ describe('', () => { }); }); + describe('prop: disabled', () => { + it('will be unfocused if it gets disabled', () => { + const wrapper = shallow(); + wrapper.setState({ focused: true }); + wrapper.setProps({ disabled: true }); + assert.strictEqual(wrapper.state().focused, false); + }); + }); + describe('input', () => { it('should be filled with a value', () => { const wrapper = shallow(