diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 302d764c0f4..a6d6c83bb8d 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -335,58 +335,54 @@ export class Select implements ComponentInterface { await overlay.present(); - // focus selected option for popovers and modals - if (this.interface === 'popover' || this.interface === 'modal') { - const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value); - - if (indexOfSelected > -1) { - const selectedItem = overlay.querySelector( - `.select-interface-option:nth-child(${indexOfSelected + 1})` - ); - - if (selectedItem) { - /** - * Browsers such as Firefox do not - * correctly delegate focus when manually - * focusing an element with delegatesFocus. - * We work around this by manually focusing - * the interactive element. - * ion-radio and ion-checkbox are the only - * elements that ion-select-popover uses, so - * we only need to worry about those two components - * when focusing. - */ - const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox') as - | HTMLIonRadioElement - | HTMLIonCheckboxElement - | null; - if (interactiveEl) { - // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling - // and removing `ion-focused` style - interactiveEl.setFocus(); - } + const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value); + if (indexOfSelected > -1) { + const selectedItem = overlay.querySelector( + `.select-interface-option:nth-child(${indexOfSelected + 1})` + ); - focusVisibleElement(selectedItem); - } - } else { + if (selectedItem) { /** - * If no value is set then focus the first enabled option. + * Browsers such as Firefox do not + * correctly delegate focus when manually + * focusing an element with delegatesFocus. + * We work around this by manually focusing + * the interactive element. + * ion-radio and ion-checkbox are the only + * elements that ion-select-popover uses, so + * we only need to worry about those two components + * when focusing. */ - const firstEnabledOption = overlay.querySelector( - 'ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)' - ) as HTMLIonRadioElement | HTMLIonCheckboxElement | null; - - if (firstEnabledOption) { - /** - * Focus the option for the same reason as we do above. - * - * Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling - * and removing `ion-focused` style - */ - firstEnabledOption.setFocus(); - - focusVisibleElement(firstEnabledOption.closest('ion-item')!); + const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox') as + | HTMLIonRadioElement + | HTMLIonCheckboxElement + | null; + if (interactiveEl) { + // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling + // and removing `ion-focused` style + interactiveEl.setFocus(); } + + focusVisibleElement(selectedItem); + } + } else { + /** + * If no value is set then focus the first enabled option. + */ + const firstEnabledOption = overlay.querySelector( + 'ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)' + ) as HTMLIonRadioElement | HTMLIonCheckboxElement | null; + + if (firstEnabledOption) { + /** + * Focus the option for the same reason as we do above. + * + * Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling + * and removing `ion-focused` style + */ + firstEnabledOption.setFocus(); + + focusVisibleElement(firstEnabledOption.closest('ion-item')!); } } diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html index c958d08f909..ed664e57df2 100644 --- a/core/src/components/select/test/basic/index.html +++ b/core/src/components/select/test/basic/index.html @@ -61,6 +61,156 @@ + + + Single Value - Overflowing Options + + + + + Apples + Oranges + Pears + Pineaple + Peach + Melon + Watermelon + Strawberry + Grapes + Banana + Mango + Dragonfruit + Kiwi + Blackberry + Blueberry + + + + + + Apples + Oranges + Pears + Pineaple + Peach + Melon + Watermelon + Strawberry + Grapes + Banana + Mango + Dragonfruit + Kiwi + Blackberry + Blueberry + + Apples + Oranges + Pears + Pineaple + Peach + Melon + Watermelon + Strawberry + Grapes + Banana + Mango + Dragonfruit + Kiwi + Blackberry + Blueberry + + Apples + Oranges + Pears + Pineaple + Peach + Melon + Watermelon + Strawberry + Grapes + Banana + Mango + Dragonfruit + Kiwi + Blackberry + Blueberry + + + + + + Apples + Oranges + Pears + Pineaple + Peach + Melon + Watermelon + Strawberry + Grapes + Banana + Mango + Dragonfruit + Kiwi + Blackberry + Blueberry + + Apples + Oranges + Pears + Pineaple + Peach + Melon + Watermelon + Strawberry + Grapes + Banana + Mango + Dragonfruit + Kiwi + Blackberry + Blueberry + + Apples + Oranges + Pears + Pineaple + Peach + Melon + Watermelon + Strawberry + Grapes + Banana + Mango + Dragonfruit + Kiwi + Blackberry + Blueberry + + + + + + Apples + Oranges + Pears + Pineaple + Peach + Melon + Watermelon + Strawberry + Grapes + Banana + Mango + Dragonfruit + Kiwi + Blackberry + Blueberry + + + + Multiple Value Select