From 4929b6d4f05e38dbee084944b6d020ffd605a1e9 Mon Sep 17 00:00:00 2001 From: Emily Little Date: Tue, 23 Jul 2019 10:00:29 -0400 Subject: [PATCH] https://github.com/JedWatson/react-select/pull/3652 --- docs/App/Header.js | 2 +- docs/examples/AsyncCallbacks.js | 4 ++-- docs/examples/CreatableInputOnly.js | 11 +++++++---- docs/markdown/renderer.js | 2 +- packages/react-select/src/Async.js | 2 +- packages/react-select/src/Creatable.js | 12 +++++++----- packages/react-select/src/Select.js | 18 +++++++++--------- .../react-select/src/__tests__/Select.test.js | 4 ++-- 8 files changed, 30 insertions(+), 25 deletions(-) diff --git a/docs/App/Header.js b/docs/App/Header.js index d2a3b8177c..303710ed16 100644 --- a/docs/App/Header.js +++ b/docs/App/Header.js @@ -117,7 +117,7 @@ class Header extends Component { 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 index 061b9ece14..71a69885e8 100644 --- 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 = { 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 index f9e0ce6e8a..f6f56d1e01 100644 --- 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 index bda0097750..0e3a23ae7e 100644 --- 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 index c10bc6aacd..0d784bfd19 100644 --- a/packages/react-select/src/Async.js +++ b/packages/react-select/src/Async.js @@ -76,7 +76,7 @@ export const makeAsyncSelect = ( }); } } - 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 index c06fd72dd7..ece284d822 100644 --- 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 = ( options: options, }; } - componentWillReceiveProps(nextProps: CreatableProps & C) { + UNSAFE_componentWillReceiveProps(nextProps: CreatableProps & C) { const { allowCreateWhileLoading, createOptionPosition, @@ -129,9 +130,10 @@ export const makeCreatableSelect = ( 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 = ( 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 index 8a18612770..4e2855bf93 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -387,7 +387,7 @@ export default class Select extends Component { 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 { 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 { 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 { 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 { 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 { } 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 index e61e5967d7..41344349f5 100644 --- 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(