Merge pull request #4785 from Rall3n/current-input-value-meta

Add `prevInputValue` to action meta
JedWatson · Oct 28, 2021 · 20ea030 · 20ea030
2 parents e67ea16 + a694069
commit 20ea030
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 21 deletions.
diff --git a/.changeset/gorgeous-berries-tan.md b/.changeset/gorgeous-berries-tan.md
@@ -0,0 +1,5 @@
+---
+'react-select': minor
+---
+
+Add `prevInputValue` to action meta
diff --git a/docs/examples/OnSelectResetsInput.tsx b/docs/examples/OnSelectResetsInput.tsx
@@ -3,43 +3,41 @@ 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, prevInputValue }: 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(prevInputValue);
         let menuIsOpen = undefined;
-        if (this.state.inputValue) {
+        if (prevInputValue) {
           menuIsOpen = true;
         }
         this.setState({
           menuIsOpen,
         });
-        return;
+        return prevInputValue;
       default:
-        return;
+        return prevInputValue;
     }
   };
   render() {
-    const { inputValue, menuIsOpen } = this.state;
+    const { menuIsOpen } = this.state;
     return (
       <Select
         isMulti
         defaultValue={colourOptions[0]}
         isClearable
         isSearchable
-        inputValue={inputValue}
         onInputChange={this.onInputChange}
         name="color"
         options={colourOptions}

diff --git 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',
+      prevInputValue: 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', prevInputValue: inputValue });
     if (closeMenuOnSelect) {
       this.setState({ inputIsHiddenAfterUpdate: !isMulti });
       this.onMenuClose();
@@ -1345,9 +1348,10 @@ export default class Select<
   // ==============================
 
   handleInputChange: FormEventHandler<HTMLInputElement> = (event) => {
+    const { inputValue: prevInputValue } = this.props;
     const inputValue = event.currentTarget.value;
     this.setState({ inputIsHiddenAfterUpdate: false });
-    this.onInputChange(inputValue, { action: 'input-change' });
+    this.onInputChange(inputValue, { action: 'input-change', prevInputValue });
     if (!this.props.menuIsOpen) {
       this.onMenuOpen();
     }
@@ -1366,14 +1370,15 @@ export default class Select<
     this.openAfterFocus = false;
   };
   onInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    const { inputValue: prevInputValue } = this.props;
     if (this.menuListRef && this.menuListRef.contains(document.activeElement)) {
       this.inputRef!.focus();
       return;
     }
     if (this.props.onBlur) {
       this.props.onBlur(event);
     }
-    this.onInputChange('', { action: 'input-blur' });
+    this.onInputChange('', { action: 'input-blur', prevInputValue });
     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',
+            prevInputValue: inputValue,
+          });
           this.onMenuClose();
         } else if (isClearable && escapeClearsValue) {
           this.clearValue();

diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
@@ -1290,7 +1290,10 @@ cases(
       keyCode: 27,
       key: 'Escape',
     });
-    expect(spy).toHaveBeenCalledWith('', { action: 'menu-close' });
+    expect(spy).toHaveBeenCalledWith('', {
+      action: 'menu-close',
+      prevInputValue: 'test',
+    });
   },
   {
     'single select > should call onInputChange prop with empty string as inputValue':
@@ -3013,9 +3016,13 @@ test('close menu on hitting escape and clear input value if menu is open even if
   expect(onMenuCloseSpy).toHaveBeenCalled();
   // once by onMenuClose and other is direct
   expect(onInputChangeSpy).toHaveBeenCalledTimes(2);
-  expect(onInputChangeSpy).toHaveBeenCalledWith('', { action: 'menu-close' });
+  expect(onInputChangeSpy).toHaveBeenCalledWith('', {
+    action: 'menu-close',
+    prevInputValue: '',
+  });
   expect(onInputChangeSpy).toHaveBeenLastCalledWith('', {
     action: 'menu-close',
+    prevInputValue: '',
   });
 });
 

diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
@@ -171,6 +171,8 @@ export type InputAction =
 
 export interface InputActionMeta {
   action: InputAction;
+  /** The previous value of the search input. */
+  prevInputValue: string;
 }
 
 export type MenuPlacement = 'auto' | 'bottom' | 'top';