diff --git a/.github/workflows/assign-issues.yml b/.github/workflows/assign-issues.yml index 318f4875ac..8440cbad8e 100644 --- a/.github/workflows/assign-issues.yml +++ b/.github/workflows/assign-issues.yml @@ -11,7 +11,7 @@ jobs: issues: write steps: - name: 'Auto-assign issue' - uses: pozil/auto-assign-issue@c015a6a3f410f12f58255c3d085fd774312f7a2f # v2.1.2 + uses: pozil/auto-assign-issue@39c06395cbac76e79afc4ad4e5c5c6db6ecfdd2e # v2.2.0 with: assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits numOfAssignee: 1 diff --git a/core/package-lock.json b/core/package-lock.json index 6a79fb3c92..1ef90673eb 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -19,7 +19,7 @@ "@capacitor/haptics": "^6.0.0", "@capacitor/keyboard": "^6.0.0", "@capacitor/status-bar": "^6.0.0", - "@clack/prompts": "^0.9.0", + "@clack/prompts": "^0.10.0", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@playwright/test": "^1.46.1", @@ -709,9 +709,9 @@ } }, "node_modules/@clack/prompts": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.1.tgz", - "integrity": "sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.10.0.tgz", + "integrity": "sha512-H3rCl6CwW1NdQt9rE3n373t7o5cthPv7yUoxF2ytZvyvlJv89C5RYMJu83Hed8ODgys5vpBU0GKxIRG83jd8NQ==", "dev": true, "dependencies": { "@clack/core": "0.4.1", @@ -11017,9 +11017,9 @@ } }, "@clack/prompts": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.1.tgz", - "integrity": "sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.10.0.tgz", + "integrity": "sha512-H3rCl6CwW1NdQt9rE3n373t7o5cthPv7yUoxF2ytZvyvlJv89C5RYMJu83Hed8ODgys5vpBU0GKxIRG83jd8NQ==", "dev": true, "requires": { "@clack/core": "0.4.1", diff --git a/core/package.json b/core/package.json index 15e9d095dc..092fc9759f 100644 --- a/core/package.json +++ b/core/package.json @@ -41,7 +41,7 @@ "@capacitor/haptics": "^6.0.0", "@capacitor/keyboard": "^6.0.0", "@capacitor/status-bar": "^6.0.0", - "@clack/prompts": "^0.9.0", + "@clack/prompts": "^0.10.0", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@playwright/test": "^1.46.1", diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index d860735f72..3a2135421c 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core'; import type { ButtonInterface } from '@utils/element-interface'; import type { Attributes } from '@utils/helpers'; -import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers'; +import { addEventListener, removeEventListener, inheritAttributes, getNextSiblingOfType } from '@utils/helpers'; import { hostContext } from '@utils/theme'; import { getIonMode } from '../../global/ionic-global'; @@ -65,7 +65,41 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { this.updateState(); } - connectedCallback() { + private waitForSegmentContent(ionSegment: HTMLIonSegmentElement | null, contentId: string): Promise { + return new Promise((resolve, reject) => { + let timeoutId: NodeJS.Timeout | undefined = undefined; + let animationFrameId: number; + + const check = () => { + if (!ionSegment) { + reject(new Error(`Segment not found when looking for Segment Content`)); + return; + } + + const segmentView = getNextSiblingOfType(ionSegment); // Skip the text nodes + const segmentContent = segmentView?.querySelector( + `ion-segment-content[id="${contentId}"]` + ) as HTMLIonSegmentContentElement | null; + if (segmentContent && timeoutId) { + clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found + cancelAnimationFrame(animationFrameId); + resolve(segmentContent); + } else { + animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame + } + }; + + check(); + + // Set a timeout to reject the promise + timeoutId = setTimeout(() => { + cancelAnimationFrame(animationFrameId); + reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`)); + }, 1000); + }); + } + + async connectedCallback() { const segmentEl = (this.segmentEl = this.el.closest('ion-segment')); if (segmentEl) { this.updateState(); @@ -76,12 +110,13 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { // Return if there is no contentId defined if (!this.contentId) return; - // Attempt to find the Segment Content by its contentId - const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null; - - // If no associated Segment Content exists, log an error and return - if (!segmentContent) { - console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`); + let segmentContent; + try { + // Attempt to find the Segment Content by its contentId + segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId); + } catch (error) { + // If no associated Segment Content exists, log an error and return + console.error('Segment Button: ', (error as Error).message); return; } diff --git a/core/src/components/segment-view/test/basic/index.html b/core/src/components/segment-view/test/basic/index.html index 69d36d4a6c..78dec1d9ff 100644 --- a/core/src/components/segment-view/test/basic/index.html +++ b/core/src/components/segment-view/test/basic/index.html @@ -123,6 +123,8 @@ + + @@ -158,6 +160,34 @@ segment.value = undefined; }); } + + async function addSegmentButtonAndContent() { + const segment = document.querySelector('ion-segment'); + const segmentView = document.querySelector('ion-segment-view'); + + const newButton = document.createElement('ion-segment-button'); + const newId = `new-${Date.now()}`; + newButton.setAttribute('content-id', newId); + newButton.setAttribute('value', newId); + newButton.innerHTML = 'New Button'; + + segment.appendChild(newButton); + + setTimeout(() => { + // Timeout to test waitForSegmentContent() in segment-button + const newContent = document.createElement('ion-segment-content'); + newContent.setAttribute('id', newId); + newContent.innerHTML = 'New Content'; + + segmentView.appendChild(newContent); + + // Necessary timeout to ensure the value is set after the content is added. + // Otherwise, the transition is unsuccessful and the content is not shown. + setTimeout(() => { + segment.setAttribute('value', newId); + }, 200); + }, 200); + } diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 81c93244f6..edbb3a790c 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -317,19 +317,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( `.select-interface-option:nth-child(${indexOfSelected + 1})` @@ -352,6 +343,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(); @@ -379,8 +371,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; } diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html index c958d08f90..4e70f5a260 100644 --- a/core/src/components/select/test/basic/index.html +++ b/core/src/components/select/test/basic/index.html @@ -61,6 +61,169 @@ + + + Single Value - Overflowing Options + + + + + Apple + Apricot + Avocado + Banana + Blackberry + Blueberry + Cantaloupe + Cherry + Coconut + Cranberry + Dragonfruit + Fig + Grape + Grapefruit + Guava + Kiwi + Lemon + Lime + Lychee + Mango + Nectarine + Orange + Papaya + Passion Fruit + Peach + Pear + Pineapple + Plum + Pomegranate + Raspberry + Strawberry + Tangerine + Watermelon + + + + + + Apple + Apricot + Avocado + Banana + Blackberry + Blueberry + Cantaloupe + Cherry + Coconut + Cranberry + Dragonfruit + Fig + Grape + Grapefruit + Guava + Kiwi + Lemon + Lime + Lychee + Mango + Nectarine + Orange + Papaya + Passion Fruit + Peach + Pear + Pineapple + Plum + Pomegranate + Raspberry + Strawberry + Tangerine + Watermelon + + + + + + Apple + Apricot + Avocado + Banana + Blackberry + Blueberry + Cantaloupe + Cherry + Coconut + Cranberry + Dragonfruit + Fig + Grape + Grapefruit + Guava + Kiwi + Lemon + Lime + Lychee + Mango + Nectarine + Orange + Papaya + Passion Fruit + Peach + Pear + Pineapple + Plum + Pomegranate + Raspberry + Strawberry + Tangerine + Watermelon + + + + + + Apple + Apricot + Avocado + Banana + Blackberry + Blueberry + Cantaloupe + Cherry + Coconut + Cranberry + Dragonfruit + Fig + Grape + Grapefruit + Guava + Kiwi + Lemon + Lime + Lychee + Mango + Nectarine + Orange + Papaya + Passion Fruit + Peach + Pear + Pineapple + Plum + Pomegranate + Raspberry + Strawberry + Tangerine + Watermelon + + + + Multiple Value Select diff --git a/core/src/components/select/test/basic/select.e2e.ts b/core/src/components/select/test/basic/select.e2e.ts index 3574772849..c04899fe92 100644 --- a/core/src/components/select/test/basic/select.e2e.ts +++ b/core/src/components/select/test/basic/select.e2e.ts @@ -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); @@ -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', () => { @@ -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', () => { @@ -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', () => { @@ -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`)); + }); }); }); }); diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3ce1c62f76 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b55a80fa52 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ccbd6b826b Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2067ad9a95 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b2753efbf6 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..48a56e08b4 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-action-sheet-scroll-to-selected-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7c3fe54443 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3394b97925 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cdbac49086 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8180a337a6 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a85cc6a5d4 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4ef64e79c0 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-alert-scroll-to-selected-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..926a1dc6bb Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2e4f0b3a06 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..aff717eb1c Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..72e6b4bfe6 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..96561b7dad Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..510790f0cd Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-modal-scroll-to-selected-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a018bd0ebb Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f6dda21dde Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..aa391bdc5c Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a4878d821d Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9a6b6a34ed Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..597038e9c6 Binary files /dev/null and b/core/src/components/select/test/basic/select.e2e.ts-snapshots/select-basic-popover-scroll-to-selected-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts index 97681f6652..a740ff98ac 100644 --- a/core/src/utils/helpers.ts +++ b/core/src/utils/helpers.ts @@ -413,3 +413,14 @@ export const shallowEqualStringMap = ( return true; }; + +export const getNextSiblingOfType = (element: Element): T | null => { + let sibling = element.nextSibling; + while (sibling) { + if (sibling.nodeType === Node.ELEMENT_NODE && (sibling as T) !== null) { + return sibling as T; + } + sibling = sibling.nextSibling; + } + return null; +};