javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): focus selected item in popovers (#23991)

Browse Source
This commit is contained in:
Amanda Smith
2021-10-01 13:33:53 -05:00
committed by GitHub
parent 86a77bd379
commit 2497a53255
4 changed files with 49 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/select/select.tsx
View File

@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
import { getIonMode } from '../../global/ionic-global';
import { ActionSheetButton, ActionSheetOptions, AlertInput, AlertOptions, CssClassMap, OverlaySelect, PopoverOptions, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, StyleEventDetail } from '../../interface';
import { findItemLabel, getAriaLabel, renderHiddenInput } from '../../utils/helpers';
import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput } from '../../utils/helpers';
import { actionSheetController, alertController, popoverController } from '../../utils/overlays';
import { hostContext } from '../../utils/theme';
import { watchForOptions } from '../../utils/watch-options';
@ -179,11 +179,18 @@ export class Select implements ComponentInterface {
this.setFocus();
});
await overlay.present();
// focus selected option for popovers
if (this.interface === 'popover') {
await (overlay as HTMLIonPopoverElement).presentFromTrigger(event, true);
} else {
await overlay.present();
let indexOfSelected = this.childOpts.map(o => o.value).indexOf(this.value);
indexOfSelected = indexOfSelected > -1 ? indexOfSelected : 0; // default to first option if nothing selected
const selectedEl = overlay.querySelector<HTMLElement>(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
if (selectedEl) {
focusElement(selectedEl);
}
}
return overlay;
}