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

fix(select): focusing item works in firefox (#26668)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-01-24 14:17:04 -05:00
committed by GitHub
parent 191c3386a4
commit 946807d67b
2 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,11 +206,28 @@ export class Select implements ComponentInterface {
if (this.interface === 'popover') { if (this.interface === 'popover') {
let indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value); let indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
indexOfSelected = indexOfSelected > -1 ? indexOfSelected : 0; // default to first option if nothing selected indexOfSelected = indexOfSelected > -1 ? indexOfSelected : 0; // default to first option if nothing selected
const selectedEl = overlay.querySelector<HTMLElement>( const selectedItem = overlay.querySelector<HTMLElement>(
`.select-interface-option:nth-child(${indexOfSelected + 1})` `.select-interface-option:nth-child(${indexOfSelected + 1})`
); );
if (selectedEl) {
focusElement(selectedEl); if (selectedItem) {
focusElement(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<HTMLElement>('ion-radio, ion-checkbox');
if (interactiveEl) {
interactiveEl.focus();
}
} }
} }

11
core/src/components/select/test/basic/select.e2e.ts
View File

@ -72,7 +72,7 @@ test.describe('select: basic', () => {
}); });
test.describe('select: popover', () => { test.describe('select: popover', () => {
test('it should open a popover select', async ({ page, browserName, skip }) => { test('it should open a popover select', async ({ page, skip }) => {
// TODO (FW-2979) // TODO (FW-2979)
skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.'); skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
@ -85,12 +85,9 @@ test.describe('select: basic', () => {
const popover = page.locator('ion-popover'); const popover = page.locator('ion-popover');
// TODO(FW-1436) // select has no value, so first option should be focused by default
if (browserName !== 'firefox') { const popoverOption1 = popover.locator('.select-interface-option:first-of-type ion-radio');
// select has no value, so first option should be focused by default await expect(popoverOption1).toBeFocused();
const popoverOption1 = await popover.locator('.select-interface-option:first-of-type ion-radio');
await expect(popoverOption1).toBeFocused();
}
expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot( expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(
`select-popover-diff-${page.getSnapshotSettings()}.png` `select-popover-diff-${page.getSnapshotSettings()}.png`