Add name to action meta

This can be useful to know when you have multiple selects on the same page.
JedWatson · Jul 31, 2018 · 6079e9e · 6079e9e
1 parent 0701f92
commit 6079e9e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/src/Select.js b/src/Select.js
@@ -561,20 +561,24 @@ export default class Select extends Component<Props, State> {
       focusedValue: null,
     });
   }
+  onChange = (newValue: ValueType, actionMeta: ActionMeta) => {
+    const { onChange, name } = this.props;
+    onChange(newValue, { ...actionMeta, name });
+  };
   setValue = (
     newValue: ValueType,
     action: ActionTypes = 'set-value',
     option?: OptionType
   ) => {
-    const { closeMenuOnSelect, isMulti, onChange } = this.props;
+    const { closeMenuOnSelect, isMulti } = this.props;
     this.onInputChange('', { action: 'set-value' });
     if (closeMenuOnSelect) {
       this.inputIsHiddenAfterUpdate = !isMulti;
       this.onMenuClose();
     }
     // when the select value should change, we should reset focusedValue
     this.clearFocusValueOnUpdate = true;
-    onChange(newValue, { action, option });
+    this.onChange(newValue, { action, option });
   };
   selectOption = (newValue: OptionType) => {
     const { blurInputOnSelect, isMulti } = this.props;
@@ -612,10 +616,9 @@ export default class Select extends Component<Props, State> {
     }
   };
   removeValue = (removedValue: OptionType) => {
-    const { onChange } = this.props;
     const { selectValue } = this.state;
     const candidate = this.getOptionValue(removedValue);
-    onChange(selectValue.filter(i => this.getOptionValue(i) !== candidate), {
+    this.onChange(selectValue.filter(i => this.getOptionValue(i) !== candidate), {
       action: 'remove-value',
       removedValue,
     });
@@ -628,11 +631,10 @@ export default class Select extends Component<Props, State> {
     this.focusInput();
   };
   clearValue = () => {
-    const { isMulti, onChange } = this.props;
-    onChange(isMulti ? [] : null, { action: 'clear' });
+    const { isMulti } = this.props;
+    this.onChange(isMulti ? [] : null, { action: 'clear' });
   };
   popValue = () => {
-    const { onChange } = this.props;
     const { selectValue } = this.state;
     const lastSelectedValue = selectValue[selectValue.length - 1];
     this.announceAriaLiveSelection({
@@ -643,7 +645,7 @@ export default class Select extends Component<Props, State> {
           : undefined,
       },
     });
-    onChange(selectValue.slice(0, selectValue.length - 1), {
+    this.onChange(selectValue.slice(0, selectValue.length - 1), {
       action: 'pop-value',
       removedValue: lastSelectedValue,
     });

diff --git a/src/__tests__/Select.test.js b/src/__tests__/Select.test.js
@@ -438,7 +438,8 @@ cases(
     selectWrapper.update();
     expect(onChangeSpy).toHaveBeenCalledWith(expectedSelectedOption, {
       action: 'select-option',
-      option: expectedActionMetaOption
+      option: expectedActionMetaOption,
+      name: BASIC_PROPS.name
     });
   },
   {
@@ -587,7 +588,8 @@ cases(
     selectWrapper.update();
     expect(onChangeSpy).toHaveBeenCalledWith(expectedSelectedOption, {
       action: 'deselect-option',
-      option: expectedMetaOption
+      option: expectedMetaOption,
+      name: BASIC_PROPS.name
     });
   },
   {
@@ -1374,7 +1376,7 @@ test('multi select > call onChange with all values but last selected value and r
     .simulate('keyDown', { keyCode: 8, key: 'Backspace' });
   expect(onChangeSpy).toHaveBeenCalledWith(
     [{ label: '0', value: 'zero' }, { label: '1', value: 'one' }],
-    { action: 'pop-value', removedValue: { label: '2', value: 'two' } },
+    { action: 'pop-value', removedValue: { label: '2', value: 'two' }, name: BASIC_PROPS.name },
   );
 });
 
@@ -1415,7 +1417,7 @@ test('multi select > clicking on X next to option will call onChange with all op
 
   expect(onChangeSpy).toHaveBeenCalledWith(
     [{ label: '0', value: 'zero' }, { label: '2', value: 'two' }],
-    { action: 'remove-value', removedValue: { label: '4', value: 'four' } }
+    { action: 'remove-value', removedValue: { label: '4', value: 'four' }, name: BASIC_PROPS.name }
   );
 });
 
@@ -1864,7 +1866,7 @@ test('clear select by clicking on clear button > should not call onMenuOpen', ()
   selectWrapper
     .find('div.react-select__clear-indicator')
     .simulate('mousedown', { button: 0 });
-  expect(onChangeSpy).toBeCalledWith([], { action: 'clear' });
+  expect(onChangeSpy).toBeCalledWith([], { action: 'clear', name: BASIC_PROPS.name });
 });
 
 test('clearing select using clear button to not call onMenuOpen or onMenuClose', () => {
@@ -1897,7 +1899,8 @@ test('multi select >  calls onChange when option is selected and isSearchable is
   const selectedOption = { label: '0', value: 'zero' };
   expect(onChangeSpy).toHaveBeenCalledWith([selectedOption], {
     action: 'select-option',
-    option: selectedOption
+    option: selectedOption,
+    name: BASIC_PROPS.name
   });
 });
 
@@ -2008,7 +2011,7 @@ test('hitting spacebar should select option if isSearchable is false', () => {
   selectWrapper.simulate('keyDown', { keyCode: 32, key: ' ' });
   expect(onChangeSpy).toHaveBeenCalledWith(
     { label: '0', value: 'zero' },
-    { action: 'select-option' }
+    { action: 'select-option', name: BASIC_PROPS.name }
   );
 });
 
@@ -2121,7 +2124,7 @@ test('to clear value when hitting escape if escapeClearsValue and isClearable ar
   );
 
   selectWrapper.simulate('keyDown', { keyCode: 27, key: 'Escape' });
-  expect(onInputChangeSpy).toHaveBeenCalledWith(null, { action: 'clear' });
+  expect(onInputChangeSpy).toHaveBeenCalledWith(null, { action: 'clear', name: BASIC_PROPS.name });
 });
 
 cases(