From baa679231fc39c631f299331f24b8890cf46eb58 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Tue, 18 Oct 2016 11:54:26 +0200 Subject: [PATCH 1/9] Adds `persistInput` prop to keep the input value after blur --- src/ChipInput.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ChipInput.js b/src/ChipInput.js index 4e6c006..f6c3515 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -210,7 +210,7 @@ class ChipInput extends React.Component { handleInputBlur = (event) => { if (!this.autoComplete.refs.menu) { - this.setState({ isFocused: false, inputValue: '' }) + if (!this.props.persistInput) this.setState({ isFocused: false, inputValue: '' }); if (this.props.onBlur) this.props.onBlur(event) } } @@ -452,7 +452,8 @@ ChipInput.propTypes = { dataSource: PropTypes.arrayOf(PropTypes.string), onUpdateInput: PropTypes.func, openOnFocus: PropTypes.bool, - chipRenderer: PropTypes.func + chipRenderer: PropTypes.func, + persistInput: PropTypes.bool } ChipInput.defaultProps = { From caec7de6d6b06902147419d65922bd7e8ff592d7 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Tue, 18 Oct 2016 11:55:14 +0200 Subject: [PATCH 2/9] Use the given className prop --- src/ChipInput.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ChipInput.js b/src/ChipInput.js index f6c3515..40a8bb1 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -385,6 +385,7 @@ class ChipInput extends React.Component { return (
this.focus()} > From 4d49fef3aa0ae8b2847e1dd2a308e9dab1ba9432 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Tue, 18 Oct 2016 12:13:34 +0200 Subject: [PATCH 3/9] Use the `floatingLabelFixed` props! --- src/ChipInput.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ChipInput.js b/src/ChipInput.js index 40a8bb1..cc3122a 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -348,7 +348,7 @@ class ChipInput extends React.Component { const hasInput = (this.props.value || this.state.chips).length > 0 || this.state.inputValue.length > 0 const showHintText = hintText && !hasInput - const shrinkFloatingLabel = floatingLabelText && (hasInput || this.state.isFocused) + const shrinkFloatingLabel = floatingLabelText && (hasInput || this.state.isFocused || floatingLabelFixed) const errorTextElement = this.state.errorText && (
{this.state.errorText}
@@ -404,7 +404,7 @@ class ChipInput extends React.Component { {hintText ? : From 7473bd7718641d47ad8348213ee334f2c370bf66 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Tue, 18 Oct 2016 12:27:46 +0200 Subject: [PATCH 4/9] Fix: don't use persistInput in passed `other` props --- src/ChipInput.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ChipInput.js b/src/ChipInput.js index cc3122a..931805d 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -309,6 +309,7 @@ class ChipInput extends React.Component { hintText, hintStyle, inputStyle, + persistInput, onBlur, // eslint-disable-line no-unused-vars onChange, // eslint-disable-line no-unused-vars onFocus, // eslint-disable-line no-unused-vars From 84e6a09afe8bb7f0ebc2edc672bd8411922e3037 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Tue, 18 Oct 2016 12:33:06 +0200 Subject: [PATCH 5/9] Updated README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 87154ce..839bdaa 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,7 @@ import ChipInput from 'material-ui-chip-input' | onTouchTap | `function` | | Callback function that is called when text input is clicked. | | onUpdateInput | `function` | | Callback function that is called when the input changes (useful for auto complete). | | openOnFocus | `bool` | `false` | Opens the auto complete list on focus if set to true. | +| persistInput | `bool` | `false` | Persist the input value after the Component looses focus | | style | `object` | | Override the inline-styles of the root element. | | value | `string[]` | | The chips to display (enables controlled mode if set). | From 200db792bbc1488dbf986ff7cd8a61b7b2e023dd Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Tue, 18 Oct 2016 12:50:04 +0200 Subject: [PATCH 6/9] Fixed focus issue with persistInput --- src/ChipInput.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ChipInput.js b/src/ChipInput.js index 931805d..e1a9b98 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -210,7 +210,9 @@ class ChipInput extends React.Component { handleInputBlur = (event) => { if (!this.autoComplete.refs.menu) { - if (!this.props.persistInput) this.setState({ isFocused: false, inputValue: '' }); + if (!this.props.persistInput) this.setState({ inputValue: '' }); + this.setState({ isFocused: false }); + if (this.props.onBlur) this.props.onBlur(event) } } From 3909b6b14848bfab3788a4268b2cc6a27e2b06e9 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Tue, 18 Oct 2016 14:53:37 +0200 Subject: [PATCH 7/9] Rename to clearOnBlur, default to true --- README.md | 2 +- src/ChipInput.js | 11 +++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 839bdaa..4343a11 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ import ChipInput from 'material-ui-chip-input' | onTouchTap | `function` | | Callback function that is called when text input is clicked. | | onUpdateInput | `function` | | Callback function that is called when the input changes (useful for auto complete). | | openOnFocus | `bool` | `false` | Opens the auto complete list on focus if set to true. | -| persistInput | `bool` | `false` | Persist the input value after the Component looses focus | +| this.setState({ inputValue: '' }) | `bool` | `true` | Clear the input value after the Component looses focus | | style | `object` | | Override the inline-styles of the root element. | | value | `string[]` | | The chips to display (enables controlled mode if set). | diff --git a/src/ChipInput.js b/src/ChipInput.js index e1a9b98..659ac2d 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -210,8 +210,11 @@ class ChipInput extends React.Component { handleInputBlur = (event) => { if (!this.autoComplete.refs.menu) { - if (!this.props.persistInput) this.setState({ inputValue: '' }); - this.setState({ isFocused: false }); + if (this.props.clearOnBlur !== undefined && this.props.clearOnBlur) { + this.setState({ inputValue: '' }) + } + + this.setState({ isFocused: false }) if (this.props.onBlur) this.props.onBlur(event) } @@ -311,7 +314,7 @@ class ChipInput extends React.Component { hintText, hintStyle, inputStyle, - persistInput, + clearOnBlur, onBlur, // eslint-disable-line no-unused-vars onChange, // eslint-disable-line no-unused-vars onFocus, // eslint-disable-line no-unused-vars @@ -457,7 +460,7 @@ ChipInput.propTypes = { onUpdateInput: PropTypes.func, openOnFocus: PropTypes.bool, chipRenderer: PropTypes.func, - persistInput: PropTypes.bool + clearOnBlur: PropTypes.bool } ChipInput.defaultProps = { From c62940ccfc7729341128446b7abff2d1d5fdd00c Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Tue, 18 Oct 2016 14:59:38 +0200 Subject: [PATCH 8/9] Small Fix... --- src/ChipInput.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ChipInput.js b/src/ChipInput.js index 659ac2d..acb819c 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -210,10 +210,10 @@ class ChipInput extends React.Component { handleInputBlur = (event) => { if (!this.autoComplete.refs.menu) { - if (this.props.clearOnBlur !== undefined && this.props.clearOnBlur) { + if (this.props.clearOnBlur === undefined || this.props.clearOnBlur) { this.setState({ inputValue: '' }) } - + this.setState({ isFocused: false }) if (this.props.onBlur) this.props.onBlur(event) From a196bee8b6b6086250592ceb5057ab615bc474d8 Mon Sep 17 00:00:00 2001 From: Nicolas Gotchac Date: Tue, 18 Oct 2016 15:28:46 +0200 Subject: [PATCH 9/9] ClearOnBlur default in defaultProps --- README.md | 2 +- src/ChipInput.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4343a11..774f0de 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ import ChipInput from 'material-ui-chip-input' | onTouchTap | `function` | | Callback function that is called when text input is clicked. | | onUpdateInput | `function` | | Callback function that is called when the input changes (useful for auto complete). | | openOnFocus | `bool` | `false` | Opens the auto complete list on focus if set to true. | -| this.setState({ inputValue: '' }) | `bool` | `true` | Clear the input value after the Component looses focus | +| clearOnBlur | `bool` | `true` | Clear the input value after the Component looses focus | | style | `object` | | Override the inline-styles of the root element. | | value | `string[]` | | The chips to display (enables controlled mode if set). | diff --git a/src/ChipInput.js b/src/ChipInput.js index acb819c..d42c23b 100644 --- a/src/ChipInput.js +++ b/src/ChipInput.js @@ -210,7 +210,7 @@ class ChipInput extends React.Component { handleInputBlur = (event) => { if (!this.autoComplete.refs.menu) { - if (this.props.clearOnBlur === undefined || this.props.clearOnBlur) { + if (this.props.clearOnBlur) { this.setState({ inputValue: '' }) } @@ -464,7 +464,8 @@ ChipInput.propTypes = { } ChipInput.defaultProps = { - filter: AutoComplete.caseInsensitiveFilter + filter: AutoComplete.caseInsensitiveFilter, + clearOnBlur: true } export default ChipInput