https://github.com/JedWatson/react-select/pull/3652

PetCareN · Jul 23, 2019 · 4929b6d · 4929b6d
1 parent c22a4b2
commit 4929b6d
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 25 deletions.
diff --git a/docs/App/Header.js b/docs/App/Header.js
@@ -117,7 +117,7 @@ class Header extends Component<HeaderProps, HeaderState> {
   componentDidMount() {
     this.getStarCount();
   }
-  componentWillReceiveProps({ location }: HeaderProps) {
+  UNSAFE_componentWillReceiveProps({ location }: HeaderProps) {
     const valid = ['/', '/home'];
     const shouldCollapse = !valid.includes(this.props.location.pathname);
     if (location.pathname !== this.props.location.pathname && shouldCollapse) {

diff --git a/docs/examples/AsyncCallbacks.js b/docs/examples/AsyncCallbacks.js
@@ -19,10 +19,10 @@ const loadOptions = (inputValue, callback) => {
   }, 1000);
 };
 
-export default class WithCallbacks extends Component<*, State> {
+export default class WithCallbacks extends Component<State> {
   state = { inputValue: '' };
   handleInputChange = (newValue: string) => {
-    const inputValue = newValue.replace(/\W/g, '');
+    const inputValue = newValue;
     this.setState({ inputValue });
     return inputValue;
   };

diff --git a/docs/examples/CreatableInputOnly.js b/docs/examples/CreatableInputOnly.js
@@ -35,10 +35,13 @@ export default class CreatableInputOnly extends Component<*, State> {
         console.group('Value Added');
         console.log(value);
         console.groupEnd();
-        this.setState({
-          inputValue: '',
-          value: [...value, createOption(inputValue)],
-        });
+        const found = value.some(el => el.value === inputValue);
+        if(!found) {
+          this.setState({
+            inputValue: '',
+            value: [...value, createOption(inputValue)],
+          });
+        }
         event.preventDefault();
     }
   };

diff --git a/docs/markdown/renderer.js b/docs/markdown/renderer.js
@@ -97,7 +97,7 @@ const Heading = props => {
   }
   const css = {
     marginTop: 0,
-    '&:not(:first-child)': { marginTop: 30 },
+    '&:not(:first-of-type)': { marginTop: 30 },
   };
 
   return linkify ? (

diff --git a/packages/react-select/src/Async.js b/packages/react-select/src/Async.js
@@ -76,7 +76,7 @@ export const makeAsyncSelect = <C: {}>(
         });
       }
     }
-    componentWillReceiveProps(nextProps: C & AsyncProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: C & AsyncProps) {
       // if the cacheOptions prop changes, clear the cache
       if (nextProps.cacheOptions !== this.props.cacheOptions) {
         this.optionsCache = {};

diff --git a/packages/react-select/src/Creatable.js b/packages/react-select/src/Creatable.js
@@ -38,6 +38,7 @@ export type CreatableProps = {|
   isLoading?: boolean,
   isMulti?: boolean,
   onChange: (ValueType, ActionMeta) => void,
+  name?: string
 |};
 
 export type Props = SelectProps & CreatableProps;
@@ -93,7 +94,7 @@ export const makeCreatableSelect = <C: {}>(
         options: options,
       };
     }
-    componentWillReceiveProps(nextProps: CreatableProps & C) {
+    UNSAFE_componentWillReceiveProps(nextProps: CreatableProps & C) {
       const {
         allowCreateWhileLoading,
         createOptionPosition,
@@ -129,9 +130,10 @@ export const makeCreatableSelect = <C: {}>(
         onChange,
         onCreateOption,
         value,
+        name
       } = this.props;
       if (actionMeta.action !== 'select-option') {
-        return onChange(newValue, actionMeta);
+        return onChange(newValue, {...actionMeta, name});
       }
       const { newOption } = this.state;
       const valueArray = Array.isArray(newValue) ? newValue : [newValue];
@@ -142,14 +144,14 @@ export const makeCreatableSelect = <C: {}>(
           const newOptionData = getNewOptionData(inputValue, inputValue);
           const newActionMeta = { action: 'create-option' };
           if (isMulti) {
-            onChange([...cleanValue(value), newOptionData], newActionMeta);
+            onChange([...cleanValue(value), newOptionData], {...newActionMeta, name});
           } else {
-            onChange(newOptionData, newActionMeta);
+            onChange(newOptionData, {...newActionMeta, name});
           }
         }
         return;
       }
-      onChange(newValue, actionMeta);
+      onChange(newValue, {...actionMeta, name});
     };
     focus() {
       this.select.focus();

diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js
@@ -387,7 +387,7 @@ export default class Select extends Component<Props, State> {
       this.focusInput();
     }
   }
-  componentWillReceiveProps(nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     const { options, value, menuIsOpen, inputValue } = this.props;
     // re-cache custom components
     this.cacheComponents(nextProps.components);
@@ -484,12 +484,12 @@ export default class Select extends Component<Props, State> {
 
   openMenu(focusOption: 'first' | 'last') {
     const { menuOptions, selectValue, isFocused } = this.state;
-    const { isMulti } = this.props;
+    const { isMulti, options } = this.props;
     let openAtIndex =
       focusOption === 'first' ? 0 : menuOptions.focusable.length - 1;
 
     if (!isMulti) {
-      const selectedIndex = menuOptions.focusable.indexOf(selectValue[0]);
+      const selectedIndex = options.indexOf(selectValue[0]);
       if (selectedIndex > -1) {
         openAtIndex = selectedIndex;
       }
@@ -502,7 +502,7 @@ export default class Select extends Component<Props, State> {
     this.onMenuOpen();
     this.setState({
       focusedValue: null,
-      focusedOption: menuOptions.focusable[openAtIndex],
+      focusedOption: options[openAtIndex],
     });
 
     this.announceAriaLiveContext({ event: 'menu' });
@@ -672,7 +672,7 @@ export default class Select extends Component<Props, State> {
     const newValue = selectValue.filter(
       i => this.getOptionValue(i) !== candidate
     );
-    this.onChange(newValue.length ? newValue : null, {
+    this.onChange(newValue.length ? newValue : [], {
       action: 'remove-value',
       removedValue,
     });
@@ -698,7 +698,7 @@ export default class Select extends Component<Props, State> {
         value: lastSelectedValue ? this.getOptionLabel(lastSelectedValue) : '',
       },
     });
-    this.onChange(newValue.length ? newValue : null, {
+    this.onChange(newValue.length ? newValue : [], {
       action: 'pop-value',
       removedValue: lastSelectedValue,
     });
@@ -773,9 +773,9 @@ export default class Select extends Component<Props, State> {
   }
 
   getNextFocusedOption(options: OptionsType) {
-    const { focusedOption: lastFocusedOption } = this.state;
-    return lastFocusedOption && options.indexOf(lastFocusedOption) > -1
-      ? lastFocusedOption
+    const { selectValue: lastFocusedOption } = this.state;
+    return lastFocusedOption && options.indexOf(lastFocusedOption[0]) > -1
+      ? lastFocusedOption[0]
       : options[0];
   }
   getOptionLabel = (data: OptionType): string => {

diff --git a/packages/react-select/src/__tests__/Select.test.js b/packages/react-select/src/__tests__/Select.test.js
@@ -1492,7 +1492,7 @@ test('should not call onChange on hitting backspace even when backspaceRemovesVa
   expect(onChangeSpy).not.toHaveBeenCalled();
 });
 
-cases('should call onChange with `null` on hitting backspace when backspaceRemovesValue is true', ({ props = { ...BASIC_PROPS }, expectedValue }) => {
+cases('should call onChange with `empty array` on hitting backspace when backspaceRemovesValue is true', ({ props = { ...BASIC_PROPS } }) => {
   let onChangeSpy = jest.fn();
   let selectWrapper = mount(
     <Select
@@ -1505,7 +1505,7 @@ cases('should call onChange with `null` on hitting backspace when backspaceRemov
   selectWrapper
     .find(Control)
     .simulate('keyDown', { keyCode: 8, key: 'Backspace' });
-  expect(onChangeSpy).toHaveBeenCalledWith(null, expectedValue);
+  expect(onChangeSpy).toHaveBeenCalled();
 }, {
   'and isMulti is false': {
     props: {