Skip to content

fix(select): auto-scroll to selected item for all interfaces #30202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 28, 2025
Merged

fix(select): auto-scroll to selected item for all interfaces #30202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8f428f
- guarantee focusVisibleElement is called on all interfaces;
JoaoFerreira-FrontEnd Feb 20, 2025
5d3547a
fix(select): scroll to the selected option before the overlay is visi…
brandyscarney Feb 27, 2025
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
46 changes: 35 additions & 11 deletions core/src/components/select/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,19 +310,10 @@ export class Select implements ComponentInterface {
}
this.isExpanded = true;
const overlay = (this.overlay = await this.createOverlay(event));
overlay.onDidDismiss().then(() => {
this.overlay = undefined;
this.isExpanded = false;
this.ionDismiss.emit();
this.setFocus();
});

await overlay.present();

// focus selected option for popovers and modals
if (this.interface === 'popover' || this.interface === 'modal') {
// Add logic to scroll selected item into view before presenting
const scrollSelectedIntoView = () => {
const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);

if (indexOfSelected > -1) {
const selectedItem = overlay.querySelector<HTMLElement>(
`.select-interface-option:nth-child(${indexOfSelected + 1})`
Expand All @@ -345,6 +336,7 @@ export class Select implements ComponentInterface {
| HTMLIonCheckboxElement
| null;
if (interactiveEl) {
selectedItem.scrollIntoView({ block: 'nearest' });
// Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
// and removing `ion-focused` style
interactiveEl.setFocus();
Expand Down Expand Up @@ -372,8 +364,40 @@ export class Select implements ComponentInterface {
focusVisibleElement(firstEnabledOption.closest('ion-item')!);
}
}
};

// For modals and popovers, we can scroll before they're visible
if (this.interface === 'modal') {
overlay.addEventListener('ionModalWillPresent', scrollSelectedIntoView, { once: true });
} else if (this.interface === 'popover') {
overlay.addEventListener('ionPopoverWillPresent', scrollSelectedIntoView, { once: true });
} else {
/**
* For alerts and action sheets, we need to wait a frame after willPresent
* because these overlays don't have their content in the DOM immediately
* when willPresent fires. By waiting a frame, we ensure the content is
* rendered and can be properly scrolled into view.
*/
const scrollAfterRender = () => {
requestAnimationFrame(() => {
scrollSelectedIntoView();
});
};
if (this.interface === 'alert') {
overlay.addEventListener('ionAlertWillPresent', scrollAfterRender, { once: true });
} else if (this.interface === 'action-sheet') {
overlay.addEventListener('ionActionSheetWillPresent', scrollAfterRender, { once: true });
}
}

overlay.onDidDismiss().then(() => {
this.overlay = undefined;
this.isExpanded = false;
this.ionDismiss.emit();
this.setFocus();
});

await overlay.present();
return overlay;
}

Expand Down
163 changes: 163 additions & 0 deletions core/src/components/select/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,169 @@
</ion-item>
</ion-list>

<ion-list>
<ion-list-header>
<ion-label>Single Value - Overflowing Options</ion-label>
</ion-list-header>

<ion-item>
<ion-select id="alert-select-scroll-to-selected" label="Alert" interface="alert" value="watermelon">
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="apricot">Apricot</ion-select-option>
<ion-select-option value="avocado">Avocado</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="blackberry">Blackberry</ion-select-option>
<ion-select-option value="blueberry">Blueberry</ion-select-option>
<ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
<ion-select-option value="cherry">Cherry</ion-select-option>
<ion-select-option value="coconut">Coconut</ion-select-option>
<ion-select-option value="cranberry">Cranberry</ion-select-option>
<ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
<ion-select-option value="fig">Fig</ion-select-option>
<ion-select-option value="grape">Grape</ion-select-option>
<ion-select-option value="grapefruit">Grapefruit</ion-select-option>
<ion-select-option value="guava">Guava</ion-select-option>
<ion-select-option value="kiwi">Kiwi</ion-select-option>
<ion-select-option value="lemon">Lemon</ion-select-option>
<ion-select-option value="lime">Lime</ion-select-option>
<ion-select-option value="lychee">Lychee</ion-select-option>
<ion-select-option value="mango">Mango</ion-select-option>
<ion-select-option value="nectarine">Nectarine</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
<ion-select-option value="papaya">Papaya</ion-select-option>
<ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
<ion-select-option value="peach">Peach</ion-select-option>
<ion-select-option value="pear">Pear</ion-select-option>
<ion-select-option value="pineapple">Pineapple</ion-select-option>
<ion-select-option value="plum">Plum</ion-select-option>
<ion-select-option value="pomegranate">Pomegranate</ion-select-option>
<ion-select-option value="raspberry">Raspberry</ion-select-option>
<ion-select-option value="strawberry">Strawberry</ion-select-option>
<ion-select-option value="tangerine">Tangerine</ion-select-option>
<ion-select-option value="watermelon">Watermelon</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-select
id="action-sheet-select-scroll-to-selected"
label="Action Sheet"
interface="action-sheet"
value="watermelon"
>
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="apricot">Apricot</ion-select-option>
<ion-select-option value="avocado">Avocado</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="blackberry">Blackberry</ion-select-option>
<ion-select-option value="blueberry">Blueberry</ion-select-option>
<ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
<ion-select-option value="cherry">Cherry</ion-select-option>
<ion-select-option value="coconut">Coconut</ion-select-option>
<ion-select-option value="cranberry">Cranberry</ion-select-option>
<ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
<ion-select-option value="fig">Fig</ion-select-option>
<ion-select-option value="grape">Grape</ion-select-option>
<ion-select-option value="grapefruit">Grapefruit</ion-select-option>
<ion-select-option value="guava">Guava</ion-select-option>
<ion-select-option value="kiwi">Kiwi</ion-select-option>
<ion-select-option value="lemon">Lemon</ion-select-option>
<ion-select-option value="lime">Lime</ion-select-option>
<ion-select-option value="lychee">Lychee</ion-select-option>
<ion-select-option value="mango">Mango</ion-select-option>
<ion-select-option value="nectarine">Nectarine</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
<ion-select-option value="papaya">Papaya</ion-select-option>
<ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
<ion-select-option value="peach">Peach</ion-select-option>
<ion-select-option value="pear">Pear</ion-select-option>
<ion-select-option value="pineapple">Pineapple</ion-select-option>
<ion-select-option value="plum">Plum</ion-select-option>
<ion-select-option value="pomegranate">Pomegranate</ion-select-option>
<ion-select-option value="raspberry">Raspberry</ion-select-option>
<ion-select-option value="strawberry">Strawberry</ion-select-option>
<ion-select-option value="tangerine">Tangerine</ion-select-option>
<ion-select-option value="watermelon">Watermelon</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-select id="popover-select-scroll-to-selected" label="Popover" interface="popover" value="watermelon">
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="apricot">Apricot</ion-select-option>
<ion-select-option value="avocado">Avocado</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="blackberry">Blackberry</ion-select-option>
<ion-select-option value="blueberry">Blueberry</ion-select-option>
<ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
<ion-select-option value="cherry">Cherry</ion-select-option>
<ion-select-option value="coconut">Coconut</ion-select-option>
<ion-select-option value="cranberry">Cranberry</ion-select-option>
<ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
<ion-select-option value="fig">Fig</ion-select-option>
<ion-select-option value="grape">Grape</ion-select-option>
<ion-select-option value="grapefruit">Grapefruit</ion-select-option>
<ion-select-option value="guava">Guava</ion-select-option>
<ion-select-option value="kiwi">Kiwi</ion-select-option>
<ion-select-option value="lemon">Lemon</ion-select-option>
<ion-select-option value="lime">Lime</ion-select-option>
<ion-select-option value="lychee">Lychee</ion-select-option>
<ion-select-option value="mango">Mango</ion-select-option>
<ion-select-option value="nectarine">Nectarine</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
<ion-select-option value="papaya">Papaya</ion-select-option>
<ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
<ion-select-option value="peach">Peach</ion-select-option>
<ion-select-option value="pear">Pear</ion-select-option>
<ion-select-option value="pineapple">Pineapple</ion-select-option>
<ion-select-option value="plum">Plum</ion-select-option>
<ion-select-option value="pomegranate">Pomegranate</ion-select-option>
<ion-select-option value="raspberry">Raspberry</ion-select-option>
<ion-select-option value="strawberry">Strawberry</ion-select-option>
<ion-select-option value="tangerine">Tangerine</ion-select-option>
<ion-select-option value="watermelon">Watermelon</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-select id="modal-select-scroll-to-selected" label="Modal" interface="modal" value="watermelon">
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="apricot">Apricot</ion-select-option>
<ion-select-option value="avocado">Avocado</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="blackberry">Blackberry</ion-select-option>
<ion-select-option value="blueberry">Blueberry</ion-select-option>
<ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
<ion-select-option value="cherry">Cherry</ion-select-option>
<ion-select-option value="coconut">Coconut</ion-select-option>
<ion-select-option value="cranberry">Cranberry</ion-select-option>
<ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
<ion-select-option value="fig">Fig</ion-select-option>
<ion-select-option value="grape">Grape</ion-select-option>
<ion-select-option value="grapefruit">Grapefruit</ion-select-option>
<ion-select-option value="guava">Guava</ion-select-option>
<ion-select-option value="kiwi">Kiwi</ion-select-option>
<ion-select-option value="lemon">Lemon</ion-select-option>
<ion-select-option value="lime">Lime</ion-select-option>
<ion-select-option value="lychee">Lychee</ion-select-option>
<ion-select-option value="mango">Mango</ion-select-option>
<ion-select-option value="nectarine">Nectarine</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
<ion-select-option value="papaya">Papaya</ion-select-option>
<ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
<ion-select-option value="peach">Peach</ion-select-option>
<ion-select-option value="pear">Pear</ion-select-option>
<ion-select-option value="pineapple">Pineapple</ion-select-option>
<ion-select-option value="plum">Plum</ion-select-option>
<ion-select-option value="pomegranate">Pomegranate</ion-select-option>
<ion-select-option value="raspberry">Raspberry</ion-select-option>
<ion-select-option value="strawberry">Strawberry</ion-select-option>
<ion-select-option value="tangerine">Tangerine</ion-select-option>
<ion-select-option value="watermelon">Watermelon</ion-select-option>
</ion-select>
</ion-item>
</ion-list>

<ion-list>
<ion-list-header>
<ion-label>Multiple Value Select</ion-label>
Expand Down
42 changes: 41 additions & 1 deletion core/src/components/select/test/basic/select.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import type { E2ELocator } from '@utils/test/playwright';
* does not. The overlay rendering is already tested in the respective
* test files.
*/
configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
test.describe(title('select: basic'), () => {
test.beforeEach(async ({ page }) => {
await page.goto('/src/components/select/test/basic', config);
Expand All @@ -24,6 +24,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {

await expect(page.locator('ion-alert')).toBeVisible();
});

test('it should scroll to selected option when opened', async ({ page }) => {
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');

await page.click('#alert-select-scroll-to-selected');
await ionAlertDidPresent.next();

const alert = page.locator('ion-alert');
await expect(alert).toHaveScreenshot(screenshot(`select-basic-alert-scroll-to-selected`));
});
});

test.describe('select: action sheet', () => {
Expand All @@ -36,6 +46,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {

await expect(page.locator('ion-action-sheet')).toBeVisible();
});

test('it should scroll to selected option when opened', async ({ page }) => {
const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');

await page.click('#action-sheet-select-scroll-to-selected');
await ionActionSheetDidPresent.next();

const actionSheet = page.locator('ion-action-sheet');
await expect(actionSheet).toHaveScreenshot(screenshot(`select-basic-action-sheet-scroll-to-selected`));
});
});

test.describe('select: popover', () => {
Expand All @@ -57,6 +77,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {

await expect(popover).toBeVisible();
});

test('it should scroll to selected option when opened', async ({ page }) => {
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');

await page.click('#popover-select-scroll-to-selected');
await ionPopoverDidPresent.next();

const popover = page.locator('ion-popover');
await expect(popover).toHaveScreenshot(screenshot(`select-basic-popover-scroll-to-selected`));
});
});

test.describe('select: modal', () => {
Expand All @@ -75,6 +105,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {

await expect(modal).toBeVisible();
});

test('it should scroll to selected option when opened', async ({ page }) => {
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');

await page.click('#modal-select-scroll-to-selected');
await ionModalDidPresent.next();

const modal = page.locator('ion-modal');
await expect(modal).toHaveScreenshot(screenshot(`select-basic-modal-scroll-to-selected`));
});
});
});
});
Expand Down
Binary file added ...ts/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...s/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ts/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ts/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...napshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...napshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...apshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...pshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...apshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...napshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...apshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...napshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading