From b419886d201e94c7fee8e93fe066807ab0796f8f Mon Sep 17 00:00:00 2001 From: Rallen Date: Fri, 17 Sep 2021 09:19:04 +0200 Subject: [PATCH 1/9] Add current `inputValue` to action meta --- packages/react-select/src/Select.tsx | 20 ++++++++++++++------ packages/react-select/src/types.ts | 1 + 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx index d59d9e8ecf..0566800a6e 100644 --- a/packages/react-select/src/Select.tsx +++ b/packages/react-select/src/Select.tsx @@ -758,7 +758,10 @@ export default class Select< this.props.onMenuOpen(); } onMenuClose() { - this.onInputChange('', { action: 'menu-close' }); + this.onInputChange('', { + action: 'menu-close', + currentValue: this.props.inputValue, + }); this.props.onMenuClose(); } onInputChange(newValue: string, actionMeta: InputActionMeta) { @@ -896,8 +899,8 @@ export default class Select< action: SetValueAction, option?: Option ) => { - const { closeMenuOnSelect, isMulti } = this.props; - this.onInputChange('', { action: 'set-value' }); + const { closeMenuOnSelect, isMulti, inputValue } = this.props; + this.onInputChange('', { action: 'set-value', currentValue: inputValue }); if (closeMenuOnSelect) { this.setState({ inputIsHiddenAfterUpdate: !isMulti }); this.onMenuClose(); @@ -1345,9 +1348,10 @@ export default class Select< // ============================== handleInputChange: FormEventHandler = (event) => { + const { inputValue: currentValue } = this.props; const inputValue = event.currentTarget.value; this.setState({ inputIsHiddenAfterUpdate: false }); - this.onInputChange(inputValue, { action: 'input-change' }); + this.onInputChange(inputValue, { action: 'input-change', currentValue }); if (!this.props.menuIsOpen) { this.onMenuOpen(); } @@ -1366,6 +1370,7 @@ export default class Select< this.openAfterFocus = false; }; onInputBlur: FocusEventHandler = (event) => { + const { inputValue: currentValue } = this.props; if (this.menuListRef && this.menuListRef.contains(document.activeElement)) { this.inputRef!.focus(); return; @@ -1373,7 +1378,7 @@ export default class Select< if (this.props.onBlur) { this.props.onBlur(event); } - this.onInputChange('', { action: 'input-blur' }); + this.onInputChange('', { action: 'input-blur', currentValue }); this.onMenuClose(); this.setState({ focusedValue: null, @@ -1475,7 +1480,10 @@ export default class Select< case 'Escape': if (menuIsOpen) { this.setState({ inputIsHiddenAfterUpdate: false }); - this.onInputChange('', { action: 'menu-close' }); + this.onInputChange('', { + action: 'menu-close', + currentValue: inputValue, + }); this.onMenuClose(); } else if (isClearable && escapeClearsValue) { this.clearValue(); diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts index 89d4e6057b..c0d41885a4 100644 --- a/packages/react-select/src/types.ts +++ b/packages/react-select/src/types.ts @@ -171,6 +171,7 @@ export type InputAction = export interface InputActionMeta { action: InputAction; + currentValue: string; } export type MenuPlacement = 'auto' | 'bottom' | 'top'; From 6c7a3d1e07b7d6a8f484a829e69b20eae5a92b91 Mon Sep 17 00:00:00 2001 From: Rallen Date: Fri, 17 Sep 2021 09:20:23 +0200 Subject: [PATCH 2/9] Add changeset --- .changeset/gorgeous-berries-tan.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gorgeous-berries-tan.md diff --git a/.changeset/gorgeous-berries-tan.md b/.changeset/gorgeous-berries-tan.md new file mode 100644 index 0000000000..6b31d5324a --- /dev/null +++ b/.changeset/gorgeous-berries-tan.md @@ -0,0 +1,5 @@ +--- +'react-select': minor +--- + +Add current `inputValue` to action meta From 9dac8bc58c4806b27fb962e4f2116518012e6e3b Mon Sep 17 00:00:00 2001 From: Rallen Date: Fri, 17 Sep 2021 09:37:38 +0200 Subject: [PATCH 3/9] Update `OnSelectResetsInput` example --- docs/examples/OnSelectResetsInput.tsx | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/docs/examples/OnSelectResetsInput.tsx b/docs/examples/OnSelectResetsInput.tsx index c72735ad41..e1b0fa4963 100644 --- a/docs/examples/OnSelectResetsInput.tsx +++ b/docs/examples/OnSelectResetsInput.tsx @@ -3,43 +3,38 @@ import Select, { InputActionMeta } from 'react-select'; import { colourOptions } from '../data'; interface State { - readonly inputValue: string; readonly menuIsOpen?: boolean; } export default class OnSelectResetsInput extends Component<{}, State> { - state: State = { - inputValue: '', - }; - onInputChange = (inputValue: string, { action }: InputActionMeta) => { + state: State = {}; + onInputChange = (inputValue: string, { action, currentValue }: InputActionMeta) => { console.log(inputValue, action); switch (action) { case 'input-change': - this.setState({ inputValue }); - return; + return inputValue; case 'menu-close': - console.log(this.state.inputValue); + console.log(currentValue); let menuIsOpen = undefined; - if (this.state.inputValue) { + if (currentValue) { menuIsOpen = true; } this.setState({ menuIsOpen, }); - return; + return currentValue; default: - return; + return currentValue; } }; render() { - const { inputValue, menuIsOpen } = this.state; + const { menuIsOpen } = this.state; return (