Skip to content

Commit 78a289e

Browse files
committed
Fix not focusing the selected value on menu open
Make sure menuOptions is set in menuOpen to properly set the option to focus. Also make buildMenuOptions memoized to optimize calls.
1 parent 9606a92 commit 78a289e

File tree

2 files changed

+24
-6
lines changed

2 files changed

+24
-6
lines changed

.changeset/angry-cherries-nail.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'react-select': patch
3+
---
4+
5+
Fix for not focusing the selected value when the menu opens

packages/react-select/src/Select.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -367,6 +367,17 @@ export default class Select extends Component<Props, State> {
367367
'react-select-' + (this.props.instanceId || ++instanceId);
368368

369369
const selectValue = cleanValue(value);
370+
371+
this.buildMenuOptions = memoizeOne(
372+
this.buildMenuOptions,
373+
(newArgs: any, lastArgs: any) => {
374+
const [newProps, newSelectValue] = (newArgs: [Props, OptionsType]);
375+
const [lastProps, lastSelectValue] = (lastArgs: [Props, OptionsType]);
376+
377+
return isEqual(newSelectValue, lastSelectValue)
378+
&& isEqual(newProps.inputValue, lastProps.inputValue)
379+
&& isEqual(newProps.options, lastProps.options);
380+
}).bind(this);
370381
const menuOptions = props.menuIsOpen
371382
? this.buildMenuOptions(props, selectValue)
372383
: { render: [], focusable: [] };
@@ -434,8 +445,8 @@ export default class Select extends Component<Props, State> {
434445
this.scrollToFocusedOptionOnUpdate
435446
) {
436447
scrollIntoView(this.menuListRef, this.focusedOptionRef);
448+
this.scrollToFocusedOptionOnUpdate = false;
437449
}
438-
this.scrollToFocusedOptionOnUpdate = false;
439450
}
440451
componentWillUnmount() {
441452
this.stopListeningComposition();
@@ -483,7 +494,8 @@ export default class Select extends Component<Props, State> {
483494
blur = this.blurInput;
484495

485496
openMenu(focusOption: 'first' | 'last') {
486-
const { menuOptions, selectValue, isFocused } = this.state;
497+
const { selectValue, isFocused } = this.state;
498+
const menuOptions = this.buildMenuOptions(this.props, selectValue);
487499
const { isMulti } = this.props;
488500
let openAtIndex =
489501
focusOption === 'first' ? 0 : menuOptions.focusable.length - 1;
@@ -499,13 +511,14 @@ export default class Select extends Component<Props, State> {
499511
this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef);
500512
this.inputIsHiddenAfterUpdate = false;
501513

502-
this.onMenuOpen();
503514
this.setState({
515+
menuOptions,
504516
focusedValue: null,
505517
focusedOption: menuOptions.focusable[openAtIndex],
518+
}, () => {
519+
this.onMenuOpen();
520+
this.announceAriaLiveContext({ event: 'menu' });
506521
});
507-
508-
this.announceAriaLiveContext({ event: 'menu' });
509522
}
510523
focusValue(direction: 'previous' | 'next') {
511524
const { isMulti, isSearchable } = this.props;
@@ -1278,7 +1291,7 @@ export default class Select extends Component<Props, State> {
12781291
// Menu Options
12791292
// ==============================
12801293

1281-
buildMenuOptions(props: Props, selectValue: OptionsType): MenuOptions {
1294+
buildMenuOptions = (props: Props, selectValue: OptionsType): MenuOptions => {
12821295
const { inputValue = '', options } = props;
12831296

12841297
const toOption = (option, id) => {

0 commit comments

Comments
 (0)