Skip to content
This repository was archived by the owner on Dec 11, 2020. It is now read-only.

Move inputIsHiddenAfterUpdate to state #26

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Move inputIsHiddenAfterUpdate to state #26

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4c4d72
Move inputIsHiddenAfterUpdate to state
Methuselah96 Nov 22, 2020
9098b7a
Maintain order
Methuselah96 Nov 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions packages/react-select/src/Select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,7 @@ type State = {
focusedValue: OptionType | null,
menuOptions: MenuOptions,
selectValue: OptionsType,
inputIsHiddenAfterUpdate: ?boolean,
};

type ElRef = ElementRef<*>;
Expand All @@ -318,6 +319,7 @@ export default class Select extends Component<Props, State> {
isFocused: false,
menuOptions: { render: [], focusable: [] },
selectValue: [],
inputIsHiddenAfterUpdate: undefined,
};

// Misc. Instance Properties
Expand All @@ -330,7 +332,6 @@ export default class Select extends Component<Props, State> {
hasGroups: boolean = false;
initialTouchX: number = 0;
initialTouchY: number = 0;
inputIsHiddenAfterUpdate: ?boolean;
instancePrefix: string = '';
openAfterFocus: boolean = false;
scrollToFocusedOptionOnUpdate: boolean = false;
Expand Down Expand Up @@ -397,6 +398,13 @@ export default class Select extends Component<Props, State> {
this.focusInput();
}
}
static getDerivedStateFromProps(props: Props, state: State) {
// some updates should toggle the state of the input visibility
const { inputIsHiddenAfterUpdate } = state;
return inputIsHiddenAfterUpdate != null
? { inputIsHidden: inputIsHiddenAfterUpdate, inputIsHiddenAfterUpdate: undefined }
: null;
}
UNSAFE_componentWillReceiveProps(nextProps: Props) {
const { options, value, menuIsOpen, inputValue } = this.props;
// rebuild the menu options
Expand All @@ -414,13 +422,6 @@ export default class Select extends Component<Props, State> {
const focusedOption = this.getNextFocusedOption(menuOptions.focusable);
this.setState({ menuOptions, selectValue, focusedOption, focusedValue });
}
// some updates should toggle the state of the input visibility
if (this.inputIsHiddenAfterUpdate != null) {
this.setState({
inputIsHidden: this.inputIsHiddenAfterUpdate,
});
delete this.inputIsHiddenAfterUpdate;
}
}
componentDidUpdate(prevProps: Props) {
const { isDisabled, menuIsOpen } = this.props;
Expand Down Expand Up @@ -503,12 +504,12 @@ export default class Select extends Component<Props, State> {

// only scroll if the menu isn't already open
this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef);
this.inputIsHiddenAfterUpdate = false;

this.setState({
menuOptions,
focusedValue: null,
focusedOption: menuOptions.focusable[openAtIndex],
inputIsHiddenAfterUpdate: false,
}, () => {
this.onMenuOpen();
this.announceAriaLiveContext({ event: 'menu' });
Expand Down Expand Up @@ -615,7 +616,7 @@ export default class Select extends Component<Props, State> {
const { closeMenuOnSelect, isMulti } = this.props;
this.onInputChange('', { action: 'set-value' });
if (closeMenuOnSelect) {
this.inputIsHiddenAfterUpdate = !isMulti;
this.setState({ inputIsHiddenAfterUpdate: !isMulti });
this.onMenuClose();
}
// when the select value should change, we should reset focusedValue
Expand Down Expand Up @@ -956,7 +957,7 @@ export default class Select extends Component<Props, State> {
const { isMulti, menuIsOpen } = this.props;
this.focusInput();
if (menuIsOpen) {
this.inputIsHiddenAfterUpdate = !isMulti;
this.setState({ inputIsHiddenAfterUpdate: !isMulti });
this.onMenuClose();
} else {
this.openMenu('first');
Expand Down Expand Up @@ -1100,7 +1101,7 @@ export default class Select extends Component<Props, State> {

handleInputChange = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
const inputValue = event.currentTarget.value;
this.inputIsHiddenAfterUpdate = false;
this.setState({ inputIsHiddenAfterUpdate: false });
this.onInputChange(inputValue, { action: 'input-change' });
if (!this.props.menuIsOpen) {
this.onMenuOpen();
Expand All @@ -1111,7 +1112,7 @@ export default class Select extends Component<Props, State> {
if (this.props.onFocus) {
this.props.onFocus(event);
}
this.inputIsHiddenAfterUpdate = false;
this.setState({ inputIsHiddenAfterUpdate: false });
this.announceAriaLiveContext({
event: 'input',
context: { isSearchable, isMulti },
Expand Down Expand Up @@ -1235,7 +1236,7 @@ export default class Select extends Component<Props, State> {
return;
case 'Escape':
if (menuIsOpen) {
this.inputIsHiddenAfterUpdate = false;
this.setState({ inputIsHiddenAfterUpdate: false });
this.onInputChange('', { action: 'menu-close' });
this.onMenuClose();
} else if (isClearable && escapeClearsValue) {
Expand Down