diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index df238d50502..b491668b7ac 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -15,7 +15,7 @@ jobs: security-events: write steps: - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 - - uses: github/codeql-action/init@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9 + - uses: github/codeql-action/init@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0 with: languages: javascript - - uses: github/codeql-action/analyze@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9 + - uses: github/codeql-action/analyze@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0 diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e4132fb7ec..92d551179b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [9.0.4](https://github.com/ionic-team/ionic-framework/compare/v9.0.3...v9.0.4) (2026-09-16) + +### Bug Fixes + +* **input, select, textarea:** emit one click event when slotted content is clicked ([#31423](https://github.com/ionic-team/ionic-framework/issues/31423)) ([d6acf12](https://github.com/ionic-team/ionic-framework/commit/d6acf12477d1f6633580a10b4655c5ddb382844f)) +* **input, textarea:** keep the value visible when slotted content is wide ([#31435](https://github.com/ionic-team/ionic-framework/issues/31435)) ([1fb47c5](https://github.com/ionic-team/ionic-framework/commit/1fb47c55fbc590ef38b0b9600d1287be7a2177f1)) +* **modal:** prevent ion-content collapsing at content-based heights ([#31413](https://github.com/ionic-team/ionic-framework/issues/31413)) ([8a713ab](https://github.com/ionic-team/ionic-framework/commit/8a713ab84e4a4fdfe2eba68142cfd65ec1fd13b4)), closes [#31149](https://github.com/ionic-team/ionic-framework/issues/31149) + + ## [9.0.3](https://github.com/ionic-team/ionic-framework/compare/v9.0.2...v9.0.3) (2026-09-09) ### Bug Fixes diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index a84e87494d9..a209244ae1a 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [9.0.4](https://github.com/ionic-team/ionic-framework/compare/v9.0.3...v9.0.4) (2026-09-16) + +### Bug Fixes + +* **input, select, textarea:** emit one click event when slotted content is clicked ([#31423](https://github.com/ionic-team/ionic-framework/issues/31423)) ([d6acf12](https://github.com/ionic-team/ionic-framework/commit/d6acf12477d1f6633580a10b4655c5ddb382844f)) +* **input, textarea:** keep the value visible when slotted content is wide ([#31435](https://github.com/ionic-team/ionic-framework/issues/31435)) ([1fb47c5](https://github.com/ionic-team/ionic-framework/commit/1fb47c55fbc590ef38b0b9600d1287be7a2177f1)) +* **modal:** prevent ion-content collapsing at content-based heights ([#31413](https://github.com/ionic-team/ionic-framework/issues/31413)) ([8a713ab](https://github.com/ionic-team/ionic-framework/commit/8a713ab84e4a4fdfe2eba68142cfd65ec1fd13b4)), closes [#31149](https://github.com/ionic-team/ionic-framework/issues/31149) + + ## [9.0.3](https://github.com/ionic-team/ionic-framework/compare/v9.0.2...v9.0.3) (2026-09-09) **Note:** Version bump only for package @ionic/core diff --git a/core/package-lock.json b/core/package-lock.json index 6668c514150..84757b9c669 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/core", - "version": "9.0.3", + "version": "9.0.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "9.0.3", + "version": "9.0.4", "license": "MIT", "dependencies": { "@stencil/core": "^4.44.2", @@ -633,9 +633,9 @@ "license": "MIT" }, "node_modules/@capacitor/core": { - "version": "8.5.1", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.5.1.tgz", - "integrity": "sha512-IOQ7ynG1qgrJ/RLuCO3WgyRGmkmmG/cdStRR4ftU2dWEN1FdtLrnI/XpZmZuUsOEHEnzBRJY/PmRH8eTLiXfhA==", + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.5.2.tgz", + "integrity": "sha512-agnQbGdhGw/KZFuLf7H9SY2o+oE7upkr/WPQsYaokXP6f9chaE8iVmbKkfN6SVl4w3pmz7oZ3Ur1hbkmy1hx+w==", "dev": true, "license": "MIT", "dependencies": { @@ -1839,9 +1839,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.44.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.44.2.tgz", - "integrity": "sha512-TNaYdlyHfy8UF7glvZwaY6pM0AhgCOXuW5Kx3+AO+ITeaipCHWXi5tkZ6P/3HCL+hUySc60lPKSnZ4xdYIFb4g==", + "version": "4.45.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.45.0.tgz", + "integrity": "sha512-cHd0liRzN+MKf2eoLg4XHzEBQvK04j6g1lhqZb0BR1a5kXUNaYPmS6IlM/YqYMlZ3eSDiGqwjRSx5SIwP1Imow==", "license": "MIT", "bin": { "stencil": "bin/stencil" diff --git a/core/package.json b/core/package.json index 990ee9e7283..c07e2f1f5e2 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "9.0.3", + "version": "9.0.4", "description": "Base components for Ionic", "engines": { "node": ">= 16" diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a6c8a7032d3..cf24c5fcd4f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -867,7 +867,7 @@ export namespace Components { */ "getScrollElement": () => Promise; /** - * Recalculate content dimensions. Called by overlays (e.g., popover) when sibling elements like headers or footers have finished rendering and their heights are available, ensuring accurate offset-top calculations. + * Recalculates the content dimensions and whether it should size itself to its content. Called by overlays when something they own changes, such as a header finishing its render or `--height` being updated. */ "recalculateDimensions": () => Promise; /** diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index b0673b414d5..0386847e86d 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -8,6 +8,7 @@ import { Listen, Method, Prop, + State, Watch, forceUpdate, h, @@ -15,6 +16,7 @@ import { } from '@stencil/core'; import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; +import { getOverlaySizeType } from '@utils/overlays'; import { isPlatform } from '@utils/platform'; import { isRTL } from '@utils/rtl'; import { createColorClasses, hostContext } from '@utils/theme'; @@ -77,6 +79,11 @@ export class Content implements ComponentInterface { @Element() el!: HTMLIonContentElement; + /** + * Whether the host is sized to its content. + */ + @State() sizeToContent = false; + /** * The color to use from your application's color palette. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. @@ -148,6 +155,7 @@ export class Content implements ComponentInterface { componentWillLoad() { this.inheritedAttributes = inheritAriaAttributes(this.el); + this.sizeToContent = this.readSizeToContent(); } connectedCallback() { @@ -190,6 +198,7 @@ export class Content implements ComponentInterface { // Re-observe on reattach, since componentDidLoad only fires once. this.setupFullscreenResizeObserver(); + this.updateSizeToContent(); } componentDidLoad() { @@ -258,6 +267,17 @@ export class Content implements ComponentInterface { this.fullscreenResizeObserver.observe(this.el); } + /** + * Picks up an overlay that is no longer sized the way the last render + * assumed, re-rendering only when the answer changes. Read in a `readTask` + * because resolving the custom property forces a style recalculation. + */ + private updateSizeToContent() { + readTask(() => { + this.sizeToContent = this.readSizeToContent(); + }); + } + private destroyFullscreenResizeObserver() { if (this.fullscreenResizeObserver !== undefined) { this.fullscreenResizeObserver.disconnect(); @@ -310,6 +330,34 @@ export class Content implements ComponentInterface { return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll; } + /** + * Reads whether to size the component to its content height. Forces a style + * recalculation, so it belongs in a read task or before the first render. + * + * This applies inside popovers and modals with a content-based `--height`, + * where the overlay does not provide the content with a definite height + * to fill. + * + * Only `--height` is consulted. Styling the wrapper directly, such as + * `ion-modal::part(content) { height: fit-content; }`, does not change + * `--height` and therefore cannot be observed. `--height` is the only + * supported way to opt into content-based sizing. + */ + private readSizeToContent() { + if (hostContext('ion-popover', this.el)) { + return true; + } + + const modal = this.el.closest('ion-modal'); + if (modal === null) { + return false; + } + + const height = getComputedStyle(modal).getPropertyValue('--height'); + + return getOverlaySizeType(height) === 'content'; + } + private resize() { /** * Only force update if the component is rendered in a browser context. @@ -320,6 +368,13 @@ export class Content implements ComponentInterface { * TODO: Remove if STENCIL-834 determines Stencil will account for this. */ if (Build.isBrowser) { + /** + * A window resize can cross a media query that changes the modal's + * `--height`. The content's own offsets are unchanged, so neither branch + * below re-renders and the class from the last render would go stale. + */ + this.updateSizeToContent(); + if (this.fullscreen) { readTask(() => this.readDimensions()); } else if (this.cTop !== 0 || this.cBottom !== 0) { @@ -330,14 +385,16 @@ export class Content implements ComponentInterface { } /** - * Recalculate content dimensions. Called by overlays (e.g., popover) when - * sibling elements like headers or footers have finished rendering and their - * heights are available, ensuring accurate offset-top calculations. + * Recalculates the content dimensions and whether it should size itself to + * its content. Called by overlays when something they own changes, such as + * a header finishing its render or `--height` being updated. + * * @internal */ @Method() async recalculateDimensions(): Promise { readTask(() => this.readDimensions()); + this.updateSizeToContent(); } private readDimensions() { @@ -538,7 +595,7 @@ export class Content implements ComponentInterface { class={createColorClasses(this.color, { [mode]: true, 'content-fullscreen': this.fullscreen, - 'content-sizing': hostContext('ion-popover', this.el), + 'content-sizing': this.sizeToContent, overscroll: forceOverscroll, [`content-${rtl}`]: true, })} diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index e24bf990eb9..f5d02058228 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -106,6 +106,13 @@ flex: 1; width: 100%; + + /** + * The input keeps a minimum width so that the value stays visible + * when a long label or wide slotted content would otherwise shrink + * it to nothing. + */ + min-width: $form-control-min-width; max-width: 100%; // Ensure the input fills the full height of the native wrapper. diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index dbbff605692..2dc919e41b1 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -13,8 +13,13 @@ import { forceUpdate, h, } from '@stencil/core'; -import type { NotchController, StartContainerController } from '@utils/forms'; -import { createNotchController, createStartContainerController, checkInvalidState } from '@utils/forms'; +import type { ClickController, NotchController, StartContainerController } from '@utils/forms'; +import { + createClickController, + createNotchController, + createStartContainerController, + checkInvalidState, +} from '@utils/forms'; import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers'; import { createSlotMutationController } from '@utils/slot-mutation-controller'; @@ -56,6 +61,7 @@ export class Input implements ComponentInterface { private notchSpacerEl: HTMLElement | undefined; private startContainerController?: StartContainerController; private startContainerEl: HTMLElement | undefined; + private clickController?: ClickController; private originalIonInput?: EventEmitter; @@ -392,11 +398,7 @@ export class Input implements ComponentInterface { */ @Listen('click', { capture: true }) onClickCapture(ev: Event) { - const nativeInput = this.nativeInput; - if (nativeInput && ev.target === nativeInput) { - ev.stopPropagation(); - this.el.click(); - } + this.clickController?.handleClickCapture(ev); } componentWillLoad() { @@ -433,6 +435,8 @@ export class Input implements ComponentInterface { this.startContainerController.calculateStartContainerWidth(); + this.clickController = createClickController(el, () => this.nativeInput); + // Watch for class changes to update validation state if (Build.isBrowser && typeof MutationObserver !== 'undefined') { this.validationObserver = new MutationObserver(() => { diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts index 65a921a0f6f..c54f892e6ac 100644 --- a/core/src/components/input/test/basic/input.e2e.ts +++ b/core/src/components/input/test/basic/input.e2e.ts @@ -347,3 +347,81 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { }); }); }); + +/** + * This behavior does not vary across directions/modes + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('input: slotted click'), () => { + test.beforeEach(async ({ page }) => { + await page.setContent( + ` + + + + + + + + + + `, + config + ); + }); + + test('should emit one click and focus the input when a slotted icon is clicked', async ({ page }) => { + const clickEvent = await page.spyOnEvent('click'); + + await page.locator('ion-icon[slot="start"]').click(); + + expect(clickEvent).toHaveReceivedEventTimes(1); + + const event = clickEvent.events[0]; + expect((event.target as HTMLElement).tagName.toLowerCase()).toBe('ion-icon'); + + await expect(page.locator('ion-input input.native-input')).toBeFocused(); + }); + + test('should emit one click without focusing the input when a slotted button is clicked', async ({ page }) => { + const clickEvent = await page.spyOnEvent('click'); + + await page.locator('ion-button[slot="end"]').click(); + + expect(clickEvent).toHaveReceivedEventTimes(1); + + await expect(page.locator('ion-input input.native-input')).not.toBeFocused(); + }); + + /** + * Browsers skip the label forwarding when a click lands on interactive + * content, so activating a slotted control leaves the input alone. + */ + ['ion-checkbox', 'ion-radio', 'ion-toggle'].forEach((tag) => { + test(`should activate a slotted ${tag} without focusing the input`, async ({ page }) => { + const control = page.locator(tag); + + await control.click(); + await page.waitForChanges(); + + await expect(control).toHaveAttribute('aria-checked', 'true'); + await expect(page.locator('ion-input input.native-input')).not.toBeFocused(); + }); + }); + + test('should emit one click when the input is clicked after slotted content', async ({ page }) => { + /** + * Clicking a slotted button does not produce a forwarded click for the + * input to ignore, so the following click on the input itself must + * still be emitted. + */ + await page.locator('ion-button[slot="end"]').click(); + + const clickEvent = await page.spyOnEvent('click'); + + await page.locator('ion-input input.native-input').click(); + + expect(clickEvent).toHaveReceivedEventTimes(1); + }); + }); +}); diff --git a/core/src/components/input/test/slot/input.e2e.ts b/core/src/components/input/test/slot/input.e2e.ts index e22e795c768..a63785c06e3 100644 --- a/core/src/components/input/test/slot/input.e2e.ts +++ b/core/src/components/input/test/slot/input.e2e.ts @@ -299,6 +299,47 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co screenshot(`input-slot-overflow-label-floating-value-${slotName}-slot`) ); }); + + /** + * The label and the input compete for whatever space the slot leaves + * behind. The input has to keep some of it so that the user can still + * see the value they are entering. + */ + test(`should not have visual regressions with a start-positioned label, a value and a wide ${slotName} slot`, async ({ + page, + }) => { + await setContent(page, 'label-placement="start" value="100"', slot); + + const container = page.locator('.container'); + await expect(container).toHaveScreenshot(screenshot(`input-slot-overflow-label-start-value-${slotName}-slot`)); + }); + + test(`should keep two characters of the value visible with a start-positioned label and a wide ${slotName} slot`, async ({ + page, + }) => { + await setContent(page, 'label-placement="start" value="100"', slot); + + const nativeInput = page.locator('ion-input input'); + + /** + * The width of two characters in the input's own font, which is what + * `$form-control-min-width` reserves for the value. + */ + const twoCharacterWidth = await nativeInput.evaluate((el) => { + const probe = document.createElement('span'); + probe.style.cssText = `position: absolute; visibility: hidden; white-space: pre; font: ${ + getComputedStyle(el).font + }`; + probe.textContent = '00'; + document.body.append(probe); + const { width } = probe.getBoundingClientRect(); + probe.remove(); + return width; + }); + const box = await nativeInput.boundingBox(); + + expect(box!.width).toBeGreaterThanOrEqual(twoCharacterWidth); + }); }); }); }); diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Chrome-linux.png index 5c17032d0da..91a2cef6d8f 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Firefox-linux.png index a08604737c8..0b5bea23e9f 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Safari-linux.png index 4f300336cf5..f397b3e70eb 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-end-slot-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Chrome-linux.png index 940a247cee0..faa683a84dc 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Firefox-linux.png index 51f54378272..eb1aea69640 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Safari-linux.png index b025d8c9f11..57b333e8a89 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-start-slot-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-end-slot-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-end-slot-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..64dc04bb198 Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-end-slot-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-end-slot-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-end-slot-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2868ea41277 Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-end-slot-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-end-slot-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-end-slot-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5c63e43eba4 Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-end-slot-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-start-slot-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-start-slot-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..dba097a6145 Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-start-slot-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-start-slot-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-start-slot-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..af7d68dc5b2 Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-start-slot-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-start-slot-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-start-slot-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7cb78643e1f Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slot-overflow-label-start-value-start-slot-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png index ac2eb8be127..bab3160187e 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png index d843bde11be..47078130b85 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png index f18894350bf..dd5eed9b793 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png index dbd9f21ddf9..f4744f5a4d0 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png index aa387c7f934..e4c0ab8c769 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png index c894a066f40..8e308b6db2e 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png index 198338daba3..d985c1a06d0 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png index 0ef707e079a..e11eb2f9415 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png index 130f37b511b..622ced1c97c 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png index 0d8b6331954..d7bd849bf6c 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png index 0903054ec7b..2abb49d033b 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png index 95f7000e1be..d68bcc43887 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Chrome-linux.png index 4fbca6ec1b4..35ed98c1d0a 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Firefox-linux.png index 69dc9c6fab3..43d06761556 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Safari-linux.png index 42ba5871969..d754ce166ce 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Chrome-linux.png index fc4404242a4..3b3a5540e6e 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Firefox-linux.png index 081d6371781..90d1142361b 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Safari-linux.png index 914568c6e26..a50b10d5bac 100644 Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-select-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss index 0df4a448cd3..a7456acc1c2 100644 --- a/core/src/components/modal/modal.scss +++ b/core/src/components/modal/modal.scss @@ -27,7 +27,12 @@ --max-width: auto; --height: 100%; --min-height: auto; - --max-height: auto; + /** + * Clamps a content-sized `--height` (auto, fit-content, ...) to the + * overlay, giving the wrapper's flex children something to shrink + * toward so `ion-content` scrolls instead of overflowing. + */ + --max-height: 100%; --overflow: hidden; --border-radius: 0; --border-width: 0; @@ -87,8 +92,16 @@ ion-backdrop { /** * The wrapper receives programmatic focus for screen readers but should not * show a visible focus ring, which is meant only for keyboard navigation. + * + * A flex layout is required for the wrapper to size itself to its content + * when the modal is content-sized (`--height` is auto, fit-content, ...). + * This makes it so that the content can scroll when it overflows the wrapper. */ .modal-wrapper { + display: flex; + + flex-direction: column; + outline: none; } diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 5db2f8b6c3e..94c85a43811 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -53,10 +53,10 @@ import { clearSafeAreaOverrides, getRootSafeAreaTop, onRootSafeAreaTopChange, - hasCustomModalDimensions, + getModalCoveredAxes, type ModalSafeAreaContext, } from './safe-area-utils'; -import { setCardStatusBarDark, setCardStatusBarDefault } from './utils'; +import { onModalHeightChange, setCardStatusBarDark, setCardStatusBarDefault } from './utils'; // TODO(FW-2832): types @@ -114,6 +114,7 @@ export class Modal implements ComponentInterface, OverlayInterface { private viewTransitionAnimation?: Animation; private resizeTimeout?: any; private unsubscribeRootSafeAreaTop?: () => void; + private unsubscribeHeightChange?: () => void; // True from the first safe-area write in `present()` until the enter // animation settles. A position-based read in that window is not the rest position. private isPresenting = false; @@ -1487,7 +1488,7 @@ export class Modal implements ComponentInterface, OverlayInterface { /** * Creates the context object for safe-area utilities. * - * `hasCustomDimensions` is only set by `setInitialSafeAreaOverrides()` + * `coveredAxes` is only set by `setInitialSafeAreaOverrides()` * because it is only read by `getInitialSafeAreaConfig()`. Other callers * (resize handler, post-animation update, fullscreen-padding apply) would * pay a `getComputedStyle()` cost for a value they never consult. @@ -1502,6 +1503,28 @@ export class Modal implements ComponentInterface, OverlayInterface { }; } + /** + * Keeps the content's sizing in sync with `--height`. The content reads the + * property to determine whether it should size itself to its content, and + * changes to `--height` on an ancestor or the root can change that behavior + * without changing the modal itself. + */ + private watchHeightForContent(): void { + /** + * A sheet's height comes from its breakpoints, so its content never sizes + * itself to `--height`. Watching it would cause the drag to recalculate on + * every frame. + */ + if (this.isSheetModal) { + return; + } + + this.unsubscribeHeightChange?.(); + this.unsubscribeHeightChange = onModalHeightChange(this.el, () => { + this.el.querySelectorAll('ion-content').forEach((contentEl) => contentEl.recalculateDimensions()); + }); + } + /** * Sets initial safe-area overrides before modal animation. * Called in present() before animation starts. @@ -1515,11 +1538,13 @@ export class Modal implements ComponentInterface, OverlayInterface { private setInitialSafeAreaOverrides(): void { const context: ModalSafeAreaContext = { ...this.getSafeAreaContext(), - hasCustomDimensions: hasCustomModalDimensions(this.el), + coveredAxes: getModalCoveredAxes(this.el), }; const safeAreaConfig = getInitialSafeAreaConfig(context); applySafeAreaOverrides(this.el, safeAreaConfig); + this.watchHeightForContent(); + // Set the internal offset property with the resolved root safe-area-top value if (context.isSheetModal) { this.updateSheetOffsetTop(); @@ -1646,6 +1671,9 @@ export class Modal implements ComponentInterface, OverlayInterface { this.unsubscribeRootSafeAreaTop?.(); this.unsubscribeRootSafeAreaTop = undefined; + this.unsubscribeHeightChange?.(); + this.unsubscribeHeightChange = undefined; + // Remove internal sheet offset property this.el.style.removeProperty('--ion-modal-offset-top'); diff --git a/core/src/components/modal/safe-area-utils.spec.ts b/core/src/components/modal/safe-area-utils.spec.ts new file mode 100644 index 00000000000..af69bfcc7fd --- /dev/null +++ b/core/src/components/modal/safe-area-utils.spec.ts @@ -0,0 +1,130 @@ +import { getModalCoveredAxes } from './safe-area-utils'; + +/** + * Tests `getModalCoveredAxes()` across fullscreen, fixed-size, and + * content-sized modals. The helper uses computed CSS sizes when both + * dimensions are fullscreen and measures the rendered wrapper otherwise, + * so the tests mock both sources of size information as needed. + */ +describe('modal: getModalCoveredAxes', () => { + const VIEWPORT_WIDTH = window.innerWidth; + const VIEWPORT_HEIGHT = window.innerHeight; + + let host: HTMLElement; + let wrapper: HTMLElement; + let hiddenDuringMeasurement: boolean; + let originalGetComputedStyle: PropertyDescriptor | undefined; + let sizes: Record; + + const setSize = (width: string, height: string) => { + sizes = { '--width': width, '--height': height }; + }; + + const setWrapperBox = (width: number, height: number) => { + wrapper.getBoundingClientRect = () => { + hiddenDuringMeasurement = host.classList.contains('overlay-hidden'); + return { width, height } as DOMRect; + }; + }; + + beforeEach(() => { + host = document.createElement('ion-modal'); + host.classList.add('overlay-hidden'); + document.body.appendChild(host); + + wrapper = document.createElement('div'); + wrapper.classList.add('modal-wrapper'); + host.attachShadow({ mode: 'open' }).appendChild(wrapper); + + hiddenDuringMeasurement = true; + setWrapperBox(0, 0); + + /** + * Replace the mocked `getComputedStyle` getter so tests can control + * the modal's `--width` and `--height` values. + */ + sizes = {}; + originalGetComputedStyle = Object.getOwnPropertyDescriptor(globalThis, 'getComputedStyle'); + Object.defineProperty(globalThis, 'getComputedStyle', { + value: () => ({ getPropertyValue: (property: string) => sizes[property] ?? '' }), + configurable: true, + writable: true, + }); + }); + + afterEach(() => { + if (originalGetComputedStyle) { + Object.defineProperty(globalThis, 'getComputedStyle', originalGetComputedStyle); + } + host.remove(); + }); + + it('should cover both axes when the sizes span the viewport', () => { + setSize('100%', '100%'); + + expect(getModalCoveredAxes(host)).toEqual({ vertical: true, horizontal: true }); + }); + + it('should cover neither axis for a dialog that stays clear of the viewport edges', () => { + setSize('300px', '200px'); + setWrapperBox(300, 200); + + expect(getModalCoveredAxes(host)).toEqual({ vertical: false, horizontal: false }); + }); + + it('should cover only the horizontal axis for a full-width dialog that fits its content', () => { + setSize('100%', 'fit-content'); + setWrapperBox(VIEWPORT_WIDTH, 244); + + expect(getModalCoveredAxes(host)).toEqual({ vertical: false, horizontal: true }); + }); + + it('should cover only the vertical axis for a narrow modal that fills the viewport', () => { + setSize('300px', 'fit-content'); + setWrapperBox(300, VIEWPORT_HEIGHT); + + expect(getModalCoveredAxes(host)).toEqual({ vertical: true, horizontal: false }); + }); + + it('should cover an axis whose definite size reaches the viewport', () => { + setSize('300px', `${VIEWPORT_HEIGHT}px`); + setWrapperBox(300, VIEWPORT_HEIGHT); + + expect(getModalCoveredAxes(host)).toEqual({ vertical: true, horizontal: false }); + }); + + it('should allow a few pixels of tolerance when comparing to the viewport', () => { + setSize('300px', 'fit-content'); + setWrapperBox(300, VIEWPORT_HEIGHT - 4); + + expect(getModalCoveredAxes(host)).toEqual({ vertical: true, horizontal: false }); + }); + + it('should temporarily show a hidden modal while measuring and hide it again', () => { + setSize('300px', 'fit-content'); + setWrapperBox(300, VIEWPORT_HEIGHT); + + getModalCoveredAxes(host); + + expect(hiddenDuringMeasurement).toBe(false); + expect(host.classList.contains('overlay-hidden')).toBe(true); + }); + + it('should not change visibility when measuring an already visible modal', () => { + host.classList.remove('overlay-hidden'); + setSize('300px', 'fit-content'); + setWrapperBox(300, 244); + + getModalCoveredAxes(host); + + expect(host.classList.contains('overlay-hidden')).toBe(false); + }); + + it('should not measure when both sizes span the viewport', () => { + setSize('100%', '100vh'); + setWrapperBox(0, 0); + + expect(getModalCoveredAxes(host)).toEqual({ vertical: true, horizontal: true }); + expect(hiddenDuringMeasurement).toBe(true); + }); +}); diff --git a/core/src/components/modal/safe-area-utils.ts b/core/src/components/modal/safe-area-utils.ts index b06b2315b63..5d0f7d9150d 100644 --- a/core/src/components/modal/safe-area-utils.ts +++ b/core/src/components/modal/safe-area-utils.ts @@ -1,5 +1,6 @@ import { win } from '@utils/browser'; -import { raf } from '@utils/helpers'; +import { onCustomPropertyChange, raf } from '@utils/helpers'; +import { getOverlaySizeType } from '@utils/overlays'; type SafeAreaValue = '0px' | 'inherit'; @@ -14,6 +15,17 @@ export interface SafeAreaConfig { right: SafeAreaValue; } +/** + * Indicates whether the modal spans the viewport on each axis. + * + * `vertical` means the modal reaches both the top and bottom edges. + * `horizontal` means the modal reaches both the left and right edges. + */ +export interface ModalCoveredAxes { + vertical: boolean; + horizontal: boolean; +} + /** * Context information about the modal used to determine safe-area behavior. */ @@ -23,50 +35,23 @@ export interface ModalSafeAreaContext { presentingElement?: HTMLElement; breakpoints?: number[]; currentBreakpoint?: number; + /** - * Only consulted by `getInitialSafeAreaConfig()`. Callers that only use the - * context for non-initial paths can omit this. See `hasCustomModalDimensions()`. + * Only used by `getInitialSafeAreaConfig()` to predict safe-area + * requirements before the modal is presented. Callers that only use + * the context for non-initial paths can omit this. */ - hasCustomDimensions?: boolean; + coveredAxes?: ModalCoveredAxes; } -/** - * These thresholds match the SCSS media query breakpoints in modal.vars.scss - * that trigger the centered dialog layout (non-fullscreen modal). - * - * SCSS defines two height breakpoints: $modal-inset-min-height-small (600px) - * and $modal-inset-min-height-large (768px). We use the smaller one because - * that's the threshold where the modal transitions from fullscreen to centered - * dialog — the larger breakpoint only increases the dialog's height. - */ -const MODAL_INSET_MIN_WIDTH = 768; -const MODAL_INSET_MIN_HEIGHT = 600; const EDGE_THRESHOLD = 5; -/** - * CSS values for `--width` / `--height` that are treated as fullscreen - * (modal touches the corresponding screen edges). Empty string means the - * property was not overridden. See `hasCustomModalDimensions()`. - */ -const FULLSCREEN_SIZE_VALUES = new Set(['', '100%', '100vw', '100vh', '100dvw', '100dvh', '100svw', '100svh']); - /** * Cache for resolved root safe-area-top value, invalidated once per frame. */ let cachedRootSafeAreaTop: number | null = null; let cacheInvalidationScheduled = false; -/** - * Determines if the current viewport meets the CSS media query conditions - * that cause regular modals to render as centered dialogs instead of fullscreen. - * Matches: @media (min-width: 768px) and (min-height: 600px) - */ -const isCenteredDialogViewport = (): boolean => { - if (!win) return false; - return win.matchMedia(`(min-width: ${MODAL_INSET_MIN_WIDTH}px) and (min-height: ${MODAL_INSET_MIN_HEIGHT}px)`) - .matches; -}; - /** * Resolves the current root --ion-safe-area-top value to pixels. * Uses a temporary element because getComputedStyle on :root returns @@ -105,59 +90,72 @@ export const getRootSafeAreaTop = (): number => { }; /** - * Calls back when the resolved root `--ion-safe-area-top` changes, which no - * event and no window resize covers. The probe's height tracks the variable, so - * a change to it becomes a size change the observer can see. + * Calls back when the resolved root `--ion-safe-area-top` changes. The value + * the caller already applied is passed as the baseline, so a change between + * that read and the observer starting is still reported. */ export const onRootSafeAreaTopChange = (callback: (safeAreaTop: number) => void): (() => void) => { - const doc = win?.document; - if (!doc?.body || typeof ResizeObserver === 'undefined') { - return () => undefined; - } + return onCustomPropertyChange(win?.document?.body, '--ion-safe-area-top', callback, getRootSafeAreaTop()); +}; - const probe = doc.createElement('div'); - probe.style.cssText = - 'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;width:0;' + - 'height:var(--ion-safe-area-top,0px);'; - doc.body.appendChild(probe); +/** + * Determines which viewport axes the modal spans so safe-area requirements + * can be predicted independently for each axis. + * + * A modal that spans an axis reaches both edges on that axis and needs the + * corresponding safe-area insets. A modal that does not span an axis reaches + * neither edge on that axis. + * + * When both `--width` and `--height` are `fullscreen`, coverage can be + * determined directly. Otherwise, coverage is based on the rendered wrapper, + * including cases where content sizing or `--max-height` causes the modal + * to reach the viewport. + */ +export const getModalCoveredAxes = (hostEl: HTMLElement): ModalCoveredAxes => { + const styles = getComputedStyle(hostEl); + const width = getOverlaySizeType(styles.getPropertyValue('--width')); + const height = getOverlaySizeType(styles.getPropertyValue('--height')); - /** - * Seeded with the value the caller has already applied, so a change that - * lands before the observer's first delivery still gets reported. Comparing - * against an unset value instead would consume that first delivery and treat - * the new inset as the baseline. - */ - let lastHeight = getRootSafeAreaTop(); - const observer = new ResizeObserver((entries) => { - const { height } = entries[0].contentRect; - if (height !== lastHeight) { - lastHeight = height; - callback(height); - } - }); - observer.observe(probe); + if (width === 'fullscreen' && height === 'fullscreen') { + return { vertical: true, horizontal: true }; + } - return () => { - observer.disconnect(); - probe.remove(); - }; + return measureCoveredAxes(hostEl); }; /** - * True when the modal host declares BOTH a non-fullscreen `--width` AND a - * non-fullscreen `--height` (i.e. a centered-dialog-like modal that doesn't - * touch any screen edge). + * Measures the modal wrapper to determine whether it spans the viewport + * on each axis. + * + * The wrapper has no box while the modal is hidden, so `overlay-hidden` + * is temporarily removed to allow the wrapper to be measured. The class + * is restored in the same task before the browser can paint. * - * The conservative "both axes" check avoids mis-zeroing safe-area for - * partial-custom modals where the modal still touches top/bottom edges - * (e.g. only `--width` overridden). Partial cases fall through to the - * existing position-based post-animation correction. + * Only the wrapper's size is measured. Its position is affected by the + * enter animation, which initially translates it by its own height, while + * the translation does not affect its measured size. */ -export const hasCustomModalDimensions = (hostEl: HTMLElement): boolean => { - const styles = getComputedStyle(hostEl); - const width = styles.getPropertyValue('--width').trim(); - const height = styles.getPropertyValue('--height').trim(); - return !FULLSCREEN_SIZE_VALUES.has(width) && !FULLSCREEN_SIZE_VALUES.has(height); +const measureCoveredAxes = (hostEl: HTMLElement): ModalCoveredAxes => { + const wrapperEl = hostEl.shadowRoot?.querySelector('.modal-wrapper'); + if (wrapperEl == null || win === undefined) { + return { vertical: false, horizontal: false }; + } + + const wasHidden = hostEl.classList.contains('overlay-hidden'); + if (wasHidden) { + hostEl.classList.remove('overlay-hidden'); + } + + const { width, height } = wrapperEl.getBoundingClientRect(); + + if (wasHidden) { + hostEl.classList.add('overlay-hidden'); + } + + return { + vertical: height >= win.innerHeight - EDGE_THRESHOLD, + horizontal: width >= win.innerWidth - EDGE_THRESHOLD, + }; }; /** @@ -195,27 +193,24 @@ export const getInitialSafeAreaConfig = (context: ModalSafeAreaContext): SafeAre }; } - // On viewports that meet the centered dialog media query breakpoints, - // regular modals render as centered dialogs (not fullscreen), so they - // don't touch any screen edges and don't need safe-area insets. Also - // applies to phone viewports when the modal declares custom --width and - // --height; these don't touch screen edges either, so the initial - // prediction must be zero to avoid a post-animation correction flash. - if (isCenteredDialogViewport() || context.hasCustomDimensions) { - return { - top: '0px', - bottom: '0px', - left: '0px', - right: '0px', - }; - } + /** + * Each axis is evaluated independently because a modal can span one axis + * without spanning the other. This allows the initial safe-area configuration + * to match the modal's expected dimensions and avoids correcting an incorrect + * pair of insets after presentation. + * + * A modal can span the horizontal axis while remaining inset vertically, or + * span the vertical axis while remaining inset horizontally. Wide viewports + * can also render regular modals as centered dialogs, while content-sized + * modals may still be clamped to the viewport. + */ + const { vertical, horizontal } = context.coveredAxes ?? { vertical: true, horizontal: true }; - // Fullscreen modals on phone - inherit all safe areas return { - top: 'inherit', - bottom: 'inherit', - left: 'inherit', - right: 'inherit', + top: vertical ? 'inherit' : '0px', + bottom: vertical ? 'inherit' : '0px', + left: horizontal ? 'inherit' : '0px', + right: horizontal ? 'inherit' : '0px', }; }; diff --git a/core/src/components/modal/test/content-height/index.html b/core/src/components/modal/test/content-height/index.html new file mode 100644 index 00000000000..9cbef076967 --- /dev/null +++ b/core/src/components/modal/test/content-height/index.html @@ -0,0 +1,403 @@ + + + + + Modal - Content Height + + + + + + + + + + + + + + +
+ + + Modal - Content Height + + + + +

Content-based heights

+ + + + + +

Definite heights

+ + + + +

Overflowing content

+ + + +

Other content-based cases

+ + + + +

Known gaps

+ + + + + + fit-content + + + + + + + + + + + auto + + + + + + + + + + + min-content + + + + + + + + + + + max-content + + + + + + + + + + + + default height + + + + + + + + + + + 300px + + + + + + + + + + + 2000px + + + + + + + + + + + fit-content + + + + + + + + + + + fit-content, max-height + + + + + + + + + + + +

Modal header

+ + + + + + + Toggled height + + + + + + + + + + + + ::part(content) + + + + + + + +
+ + + + + diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts b/core/src/components/modal/test/content-height/modal.e2e.ts new file mode 100644 index 00000000000..788a725562c --- /dev/null +++ b/core/src/components/modal/test/content-height/modal.e2e.ts @@ -0,0 +1,478 @@ +import { expect } from '@playwright/test'; +import type { E2EPage } from '@utils/test/playwright'; +import { configs, test } from '@utils/test/playwright'; + +const ISSUE = 'https://github.com/ionic-team/ionic-framework/issues/31149'; + +/** Height of the child inside `ion-content`, so sizing can be asserted exactly. */ +const CHILD_HEIGHT = 200; + +/** Taller than any viewport under test, to force the overflow cases. */ +const TALL_CHILD_HEIGHT = 2000; + +/** + * Delays the remount long enough to trigger a fresh evaluation, but not long + * enough for the modal's later safe-area write to clear the stale class. + */ +const REMOUNT_TIMEOUT = 100; + +/** + * `setContent` has animations enabled by default, so `toBeVisible()` resolves as + * the modal starts animating in and everything after it is measured + * mid-animation. This turns animations off for each modal. + */ +const DISABLE_ANIMATIONS = ``; + +const contentModal = (css = '', childHeight = CHILD_HEIGHT) => ` + ${DISABLE_ANIMATIONS} + ${css === '' ? '' : ``} + + + + Modal + + + +
height: ${childHeight}px
+ + +`; + +/** + * Nav pages have to be registered before `ion-nav` resolves its root, and the + * nav has to arrive through the modal's `component` delegate. An `ion-nav` + * slotted inline renders no pages at all. + */ +const navModal = (css = '') => ` + ${css === '' ? '' : ``} + + +`; + +const getContentHeight = async (page: E2EPage) => { + const box = await page.locator('ion-modal ion-content').first().boundingBox(); + return box?.height ?? 0; +}; + +const getWrapperHeight = async (page: E2EPage) => { + const box = await page.locator('ion-modal .modal-wrapper').boundingBox(); + return box?.height ?? 0; +}; + +/** + * A content-sized modal has no definite height to hand down, so the scroll + * container only scrolls if it can shrink against the modal's `--max-height`. + * `scrollHeight > clientHeight` is what separates scrolling from clipping. + */ +const getScrollMetrics = (page: E2EPage) => { + return page.locator('ion-modal ion-content').evaluate(async (el: HTMLIonContentElement) => { + const scrollEl = await el.getScrollElement(); + return { scrollHeight: scrollEl.scrollHeight, clientHeight: scrollEl.clientHeight }; + }); +}; + +/** + * Simulates a framework-driven detach/reattach around a modal height change: + * removes the content from the DOM, updates the modal's `--height` while the + * content is detached, then restores it to its original parent. + * + * The same element has to come back for this to reach the reconnect path, the + * way a framework moves a subtree it owns instead of rebuilding it, such as + * Vue's ``. Conditional rendering that discards the element and + * creates a new one is sized by that element's first render instead. + */ +const setHeightWhileDetached = (page: E2EPage, height: string) => { + return page.locator('ion-modal').evaluate(async (el: HTMLElement, height: string) => { + const content = el.querySelector('ion-content')!; + const parent = content.parentElement!; + + content.remove(); + el.style.setProperty('--height', height); + + await new Promise((resolve) => setTimeout(resolve, 200)); + parent.appendChild(content); + }, height); +}; + +/** Presents a nav modal through the delegate and waits for its first page. */ +const presentNavModal = async (page: E2EPage) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.locator('ion-modal').evaluate((modal: HTMLIonModalElement) => { + modal.component = document.createElement('nav-host'); + return modal.present(); + }); + + await ionModalDidPresent.next(); + await page.locator('ion-modal ion-nav nav-page-one').waitFor(); +}; + +/** + * This behavior does not vary across directions + */ +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('modal: content height'), () => { + test.describe('content-based heights', () => { + /** + * Each of these leaves the content an indefinite height to resolve + * against, which is what used to collapse it. The content holds a single + * fixed height child, so a correct result is exactly that height: + * collapsed content measures 0, and a modal that ignored the height would + * fill the screen. + */ + const expectSizedToContent = async (page: E2EPage, height: string) => { + await page.setContent(contentModal(`ion-modal { --height: ${height}; }`), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + await expect(page.locator('ion-modal ion-content')).toHaveClass(/content-sizing/); + await expect.poll(() => getContentHeight(page)).toBe(CHILD_HEIGHT); + }; + + test('should size the content with fit-content', async ({ page }) => { + test.info().annotations.push({ type: 'issue', description: ISSUE }); + + await expectSizedToContent(page, 'fit-content'); + }); + + test('should size the content with auto', async ({ page }) => { + test.info().annotations.push({ type: 'issue', description: ISSUE }); + + await expectSizedToContent(page, 'auto'); + }); + + test('should size the content with min-content', async ({ page }) => { + test.info().annotations.push({ type: 'issue', description: ISSUE }); + + await expectSizedToContent(page, 'min-content'); + }); + + test('should size the content with max-content', async ({ page }) => { + test.info().annotations.push({ type: 'issue', description: ISSUE }); + + await expectSizedToContent(page, 'max-content'); + }); + }); + + test.describe('definite heights', () => { + test('should fill the screen with the default height', async ({ page }) => { + await page.setContent(contentModal(), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + const viewport = page.viewportSize()!; + + // Content sizing should not be applied by default. + await expect(page.locator('ion-modal ion-content')).not.toHaveClass(/content-sizing/); + await expect.poll(() => getWrapperHeight(page)).toBe(viewport.height); + }); + + test('should fill and scroll a pixel height', async ({ page }) => { + await page.setContent(contentModal('ion-modal { --height: 300px; }', TALL_CHILD_HEIGHT), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + // A definite height is not content-sized, so the ion-content + // should fill the modal the way it always has. + await expect(page.locator('ion-modal ion-content')).not.toHaveClass(/content-sizing/); + await expect.poll(() => getWrapperHeight(page)).toBe(300); + + // The scroll container takes what the header leaves of the modal. + const headerHeight = (await page.locator('ion-modal ion-header').boundingBox())!.height; + const { scrollHeight, clientHeight } = await getScrollMetrics(page); + expect(clientHeight).toBe(300 - headerHeight); + expect(scrollHeight).toBeGreaterThan(clientHeight); + }); + + test('should clamp a pixel height taller than the overlay', async ({ page }) => { + await page.setContent(contentModal('ion-modal { --height: 2000px; }'), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + const viewport = page.viewportSize()!; + + // 2000px exceeds the overlay, so the default --max-height: 100% should + // clamp the height rather than letting it run off screen. + await expect.poll(() => getWrapperHeight(page)).toBe(viewport.height); + }); + }); + + test.describe('overflowing content', () => { + test('should scroll rather than overflow the screen', async ({ page }) => { + await page.setContent(contentModal('ion-modal { --height: fit-content; }', TALL_CHILD_HEIGHT), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + const viewport = page.viewportSize()!; + const headerHeight = (await page.locator('ion-modal ion-header').boundingBox())!.height; + + // The default --max-height keeps a content-sized modal inside the + // overlay, so overflowing content leaves it exactly as tall as the + // viewport rather than any height up to it. + await expect.poll(() => getWrapperHeight(page)).toBe(viewport.height); + + // The content takes what the header leaves and scrolls the child + // inside it, where a collapsed content would measure zero. + const { scrollHeight, clientHeight } = await getScrollMetrics(page); + expect(clientHeight).toBe(viewport.height - headerHeight); + expect(scrollHeight).toBeGreaterThan(clientHeight); + }); + + test('should honor a smaller --max-height', async ({ page }) => { + await page.setContent( + contentModal('ion-modal { --height: fit-content; --max-height: 50%; }', TALL_CHILD_HEIGHT), + config + ); + await expect(page.locator('ion-modal')).toBeVisible(); + + const viewport = page.viewportSize()!; + const headerHeight = (await page.locator('ion-modal ion-header').boundingBox())!.height; + + // Setting --max-height to 50% shrinks the modal to half the viewport. + // Half of an odd viewport lands on a sub-pixel, which the wrapper + // keeps and `clientHeight` rounds. + expect(await getWrapperHeight(page)).toBeCloseTo(viewport.height * 0.5, 0); + + // The content takes what the header leaves and scrolls the child + // inside it, where a collapsed content would measure zero. + const { scrollHeight, clientHeight } = await getScrollMetrics(page); + expect(clientHeight).toBe(Math.round(viewport.height * 0.5 - headerHeight)); + expect(scrollHeight).toBeGreaterThan(clientHeight); + }); + }); + + test.describe('structure and reactivity', () => { + test('should size a modal that has no ion-content', async ({ page }) => { + await page.setContent( + ` + ${DISABLE_ANIMATIONS} + + +
+ + `, + config + ); + await expect(page.locator('ion-modal')).toBeVisible(); + + // Sized through `ion-modal > .ion-page` alone, with none of the + // content-sizing detection involved. + await expect(page.locator('ion-modal ion-content')).toHaveCount(0); + await expect.poll(() => getWrapperHeight(page)).toBe(CHILD_HEIGHT); + }); + + test('should size a modal around an ion-nav and follow it between pages', async ({ page }) => { + await page.setContent(navModal('ion-modal { --height: fit-content; }'), config); + await presentNavModal(page); + + // Without the nav being positioned relatively it has no intrinsic + // height, so the modal would be 0. + const pageOneHeight = await getWrapperHeight(page); + expect(pageOneHeight).toBeGreaterThan(100); + + // Page two is taller, so the modal grows to follow the active page. + await page.locator('ion-modal ion-nav').evaluate((nav: HTMLIonNavElement) => nav.push('nav-page-two')); + await page.locator('ion-modal #tall-block').waitFor(); + + expect(await getWrapperHeight(page)).toBeGreaterThan(pageOneHeight); + }); + + test('should overlap nav pages mid-transition rather than stack them', async ({ page }) => { + /** + * The nav fixture keeps animations enabled so both pages are in the + * tree at once during the transition, which is what makes it possible + * to catch them laid out one below the other. + */ + await page.setContent(navModal('ion-modal { --height: fit-content; }'), config); + await presentNavModal(page); + + const tops = await page.locator('ion-modal ion-nav').evaluate(async (nav: HTMLIonNavElement) => { + const pushed = nav.push('nav-page-two'); + + /** + * Both pages are in the tree from the first frame of the transition, + * which runs for around half a second, so one frame is enough to + * catch them together. A page that has been hidden reports a zero + * rect, so only pages with a real box count. + */ + await new Promise((resolve) => requestAnimationFrame(resolve)); + const laidOut = Array.from(nav.children).filter((child) => child.getBoundingClientRect().height > 0); + const tops = laidOut.map((child) => Math.round(child.getBoundingClientRect().top)); + + // Awaiting the push surfaces a rejected transition as a test failure. + await pushed; + + return tops; + }); + + // Both pages are laid out during the slide and must share an origin. + expect(tops).toHaveLength(2); + expect(new Set(tops).size).toBe(1); + }); + + /** + * Nav pages carried these properties once before, at `height: 100%`, and + * it left titles animating to the wrong place (#25677, #25688). This + * covers where a transition ends up, with the arriving page and its title + * resting against the modal. + */ + test('should settle a nav transition with the new page in place', async ({ page }) => { + await page.setContent(navModal('ion-modal { --height: fit-content; }'), config); + await presentNavModal(page); + + // Awaiting the push resolves once the transition is done. + await page.locator('ion-modal ion-nav').evaluate((nav: HTMLIonNavElement) => nav.push('nav-page-two')); + + const arrived = page.locator('ion-modal nav-page-two'); + await expect(arrived.locator('ion-title')).toBeVisible(); + await expect(page.locator('ion-modal nav-page-one')).toBeHidden(); + + // A page left mid-slide still has a box, so the box has to line up with + // the modal on both axes for the transition to have actually landed. + const pageBox = (await arrived.boundingBox())!; + const wrapperBox = (await page.locator('ion-modal .modal-wrapper').boundingBox())!; + expect(pageBox.x).toBeCloseTo(wrapperBox.x, 0); + expect(pageBox.y).toBeCloseTo(wrapperBox.y, 0); + expect(pageBox.height).toBeGreaterThan(0); + + /** + * The title drifting down the viewport is the reported symptom, so the + * header has to sit at the top of the modal with the title inside it. + * Each mode insets the title by a different amount. + */ + const headerBox = (await arrived.locator('ion-header').boundingBox())!; + const titleBox = (await arrived.locator('ion-title').boundingBox())!; + expect(headerBox.y).toBeCloseTo(wrapperBox.y, 0); + expect(titleBox.y).toBeGreaterThanOrEqual(headerBox.y); + expect(titleBox.y + titleBox.height).toBeLessThanOrEqual(headerBox.y + headerBox.height + 1); + + // Going back has to land the same way, since the pop animates too. + await page.locator('ion-modal ion-nav').evaluate((nav: HTMLIonNavElement) => nav.pop()); + + await expect(page.locator('ion-modal nav-page-one ion-title')).toBeVisible(); + await expect(arrived).toBeHidden(); + expect((await page.locator('ion-modal nav-page-one').boundingBox())!.x).toBeCloseTo(wrapperBox.x, 0); + }); + + test('should respect a --height set on the modal at runtime', async ({ page }) => { + await page.setContent(contentModal(), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + const viewport = page.viewportSize()!; + const modal = page.locator('ion-modal'); + const content = page.locator('ion-modal ion-content'); + + // No --height of its own, so the modal is on its default full height. + await expect(content).not.toHaveClass(/content-sizing/); + await expect.poll(() => getWrapperHeight(page)).toBe(viewport.height); + + // Set the --height and verify the observer is picking it up and + // adding the content-sizing class to the content. + await modal.evaluate((el: HTMLElement) => el.style.setProperty('--height', 'fit-content')); + await expect(content).toHaveClass(/content-sizing/); + await expect.poll(() => getContentHeight(page)).toBe(CHILD_HEIGHT); + + // Removing it falls back to the default, so a class left behind in + // either direction is caught. + await modal.evaluate((el: HTMLElement) => el.style.removeProperty('--height')); + await expect(content).not.toHaveClass(/content-sizing/); + await expect.poll(() => getWrapperHeight(page)).toBe(viewport.height); + }); + + test('should respect a --height that changed while the content was detached', async ({ page }) => { + await page.setContent(contentModal(), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + const viewport = page.viewportSize()!; + const content = page.locator('ion-modal ion-content'); + + // Coming back to a content-based height should size the content to its + // child rather than collapse it. + await setHeightWhileDetached(page, 'fit-content'); + await expect(content).toHaveClass(/content-sizing/, { timeout: REMOUNT_TIMEOUT }); + await expect.poll(() => getContentHeight(page)).toBe(CHILD_HEIGHT); + + // Coming back to a definite height should fill the modal again, so a + // class left behind in either direction is caught. + await setHeightWhileDetached(page, '100%'); + await expect(content).not.toHaveClass(/content-sizing/, { timeout: REMOUNT_TIMEOUT }); + await expect.poll(() => getWrapperHeight(page)).toBe(viewport.height); + }); + + test('should respect a dynamically added body class that sets --height', async ({ page }) => { + await page.setContent(contentModal('body.custom-class ion-modal { --height: fit-content; }'), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + const viewport = page.viewportSize()!; + const content = page.locator('ion-modal ion-content'); + + await expect(content).not.toHaveClass(/content-sizing/); + await expect.poll(() => getWrapperHeight(page)).toBe(viewport.height); + + await page.evaluate(() => document.body.classList.add('custom-class')); + + await expect(content).toHaveClass(/content-sizing/); + await expect.poll(() => getContentHeight(page)).toBe(CHILD_HEIGHT); + }); + }); + }); + + test.describe(title('modal: content height rendering'), () => { + test('should render a modal sized to its content', async ({ page }) => { + await page.setContent(contentModal('ion-modal { --height: fit-content; }'), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + await expect(page).toHaveScreenshot(screenshot('modal-content-height-basic')); + }); + + test('should render a content-sized modal whose content overflows', async ({ page }) => { + await page.setContent(contentModal('ion-modal { --height: fit-content; }', TALL_CHILD_HEIGHT), config); + await expect(page.locator('ion-modal')).toBeVisible(); + + await expect(page).toHaveScreenshot(screenshot('modal-content-height-overflow')); + }); + + test('should render a content-sized modal with an ion-nav', async ({ page }) => { + await page.setContent(navModal('ion-modal { --height: fit-content; }'), config); + await presentNavModal(page); + + await expect(page).toHaveScreenshot(screenshot('modal-content-height-nav')); + }); + }); +}); diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4b987641db4 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f7908d0d9b6 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2a35d7e437d Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d826f723182 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..654f6470aad Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5f601dd4757 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-basic-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..eb8d2a12ff0 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..69a17bc29d5 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..912aaec64b5 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..fe0a14a3bba Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..908a72af971 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9430111477d Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-nav-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ede48236109 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..39a951afbcc Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a4c44d457b9 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..72ab1dc9a83 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9aeb4618795 Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..239e39bff1c Binary files /dev/null and b/core/src/components/modal/test/content-height/modal.e2e.ts-snapshots/modal-content-height-overflow-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/safe-area/index.html b/core/src/components/modal/test/safe-area/index.html index 14681f3820f..f5b1f55d57d 100644 --- a/core/src/components/modal/test/safe-area/index.html +++ b/core/src/components/modal/test/safe-area/index.html @@ -71,6 +71,20 @@

Card Modals (iOS)

Centered Dialog (Tablet)

+

Content Sized Dialog

+ + + + +

Diagnostic Info

Window Width:

@@ -228,6 +242,55 @@

Modal Safe-Area Overrides:

modal.remove(); } + /** + * A dialog with custom dimensions on both axes and a content-sized + * height. Short content keeps it away from the screen edges, while + * overflowing content causes `--max-height` to clamp it to the + * viewport, where it reaches the top and bottom edges. + */ + async function presentContentSizedDialog(childHeight, width = '300px') { + const element = document.createElement('div'); + element.innerHTML = ` + + + Content Sized Dialog + + Close + + + + +

Content sized dialog.

+
+

Last line of content, which the home indicator must not cover.

+ + `; + + const modal = Object.assign(document.createElement('ion-modal'), { + component: element, + cssClass: 'content-sized-dialog', + }); + + const style = document.createElement('style'); + style.textContent = ` + .content-sized-dialog { + --width: ${width}; + --height: fit-content; + } + `; + document.head.appendChild(style); + + element.querySelector('.dismiss').addEventListener('click', () => modal.dismiss()); + document.body.appendChild(modal); + + await modal.present(); + updateModalDiagnostics(modal); + + await modal.onDidDismiss(); + modal.remove(); + style.remove(); + } + async function presentCenteredDialog() { const element = createModalContent('Centered Dialog'); // Centered dialog uses custom dimensions diff --git a/core/src/components/modal/test/safe-area/modal.e2e.ts b/core/src/components/modal/test/safe-area/modal.e2e.ts index 4905f645aa3..740eb83c298 100644 --- a/core/src/components/modal/test/safe-area/modal.e2e.ts +++ b/core/src/components/modal/test/safe-area/modal.e2e.ts @@ -1,5 +1,6 @@ import { expect } from '@playwright/test'; import type { Locator } from '@playwright/test'; +import type { E2EPage } from '@utils/test/playwright'; import { configs, detachAndReattach, test, Viewports } from '@utils/test/playwright'; /** @@ -25,6 +26,49 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, config await page.goto('/src/components/modal/test/safe-area', config); }); + /** + * The safe-area prediction is applied before the modal is shown, so + * reading it when the modal starts presenting captures the prediction + * before the position-based correction runs. + */ + const getPredictedSafeArea = async (page: E2EPage, trigger: string) => { + await page.evaluate(() => { + document.addEventListener( + 'ionModalWillPresent', + (ev) => { + const modal = ev.target as HTMLElement; + (window as any).predictedSafeArea = { + top: modal.style.getPropertyValue('--ion-safe-area-top'), + bottom: modal.style.getPropertyValue('--ion-safe-area-bottom'), + left: modal.style.getPropertyValue('--ion-safe-area-left'), + right: modal.style.getPropertyValue('--ion-safe-area-right'), + }; + }, + { once: true } + ); + }); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + await page.click(trigger); + await ionModalDidPresent.next(); + + return page.evaluate(() => (window as any).predictedSafeArea); + }; + + /** + * The safe-area values after the modal has finished presenting. + * These reflect the modal's actual position and are the values that + * the initial prediction should converge to. + */ + const getSettledSafeArea = (page: E2EPage) => { + return page.locator('ion-modal').evaluate((el: HTMLElement) => ({ + top: el.style.getPropertyValue('--ion-safe-area-top'), + bottom: el.style.getPropertyValue('--ion-safe-area-bottom'), + left: el.style.getPropertyValue('--ion-safe-area-left'), + right: el.style.getPropertyValue('--ion-safe-area-right'), + })); + }; + test('fullscreen modal should inherit all safe-area values on phone', async ({ page }, testInfo) => { testInfo.annotations.push({ type: 'issue', @@ -50,7 +94,20 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, config expect(safeAreaBottom).toBe('inherit'); }); - test('regular modal should have safe-area zeroed on tablet (centered dialog)', async ({ page }, testInfo) => { + test('regular modal should predict zeroed safe-area on tablet (centered dialog)', async ({ page }) => { + // The viewport gives it centered dialog dimensions, so it stays clear + // of every edge. + await page.setViewportSize(Viewports.tablet.portrait); + + expect(await getPredictedSafeArea(page, '#fullscreen-modal')).toEqual({ + top: '0px', + bottom: '0px', + left: '0px', + right: '0px', + }); + }); + + test('regular modal should have zeroed safe-area on tablet (centered dialog)', async ({ page }, testInfo) => { testInfo.annotations.push({ type: 'issue', description: 'https://github.com/ionic-team/ionic-framework/issues/30900', @@ -445,6 +502,94 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, config await modal.evaluate((el: HTMLIonModalElement) => el.remove()); }); + test.describe('content sized dialogs', () => { + test('should predict a zeroed safe-area for a dialog that fits its content', async ({ page }) => { + expect(await getPredictedSafeArea(page, '#content-sized-dialog')).toEqual({ + top: '0px', + bottom: '0px', + left: '0px', + right: '0px', + }); + }); + + /** + * Overflowing content causes the dialog to be clamped to the viewport + * and reach the top and bottom edges, so the insets must be applied + * from the first frame. Predicting zero here would cause the header + * to change height once the modal has finished presenting. + */ + test('should predict an inherited safe-area for a dialog whose content overflows', async ({ page }) => { + expect(await getPredictedSafeArea(page, '#content-sized-dialog-tall')).toEqual({ + top: 'inherit', + bottom: 'inherit', + left: '0px', + right: '0px', + }); + }); + + /** + * A full-width dialog reaches the horizontal edges while staying clear + * of the top and bottom, so the safe-area values differ by edge. + */ + test('should predict per edge for a full width dialog that fits its content', async ({ page }) => { + expect(await getPredictedSafeArea(page, '#content-sized-dialog-full-width')).toEqual({ + top: '0px', + bottom: '0px', + left: 'inherit', + right: 'inherit', + }); + }); + + test('should predict an inherited safe-area for a full width dialog that overflows', async ({ page }) => { + expect(await getPredictedSafeArea(page, '#content-sized-dialog-full-width-tall')).toEqual({ + top: 'inherit', + bottom: 'inherit', + left: 'inherit', + right: 'inherit', + }); + }); + + /** + * A wide viewport gives regular modals the dimensions of a centered + * dialog, but a modal sized to its content can still be clamped to the + * viewport by `--max-height` and reach the edges. + */ + test('should predict per axis on a wide viewport', async ({ page }) => { + await page.setViewportSize(Viewports.tablet.portrait); + + expect(await getPredictedSafeArea(page, '#content-sized-dialog-tall')).toEqual({ + top: 'inherit', + bottom: 'inherit', + left: '0px', + right: '0px', + }); + }); + + test('should predict an inherited safe-area for a full width overflowing dialog on a wide viewport', async ({ + page, + }) => { + await page.setViewportSize(Viewports.tablet.portrait); + + expect(await getPredictedSafeArea(page, '#content-sized-dialog-full-width-tall')).toEqual({ + top: 'inherit', + bottom: 'inherit', + left: 'inherit', + right: 'inherit', + }); + }); + + /** + * A position-based pass replaces the prediction once the modal has + * presented. Any edge where the two disagree changes value at that + * point, which can cause the header to grow or shrink. + */ + test('should predict what the modal settles on', async ({ page }) => { + const predicted = await getPredictedSafeArea(page, '#content-sized-dialog-full-width'); + + expect(predicted).toEqual(await getSettledSafeArea(page)); + }); + }); + test.describe('moving a presented modal', () => { const moveModal = (modal: Locator) => detachAndReattach(modal, 'ion-app'); diff --git a/core/src/components/modal/utils.ts b/core/src/components/modal/utils.ts index ac01b3eebe8..ba426c1f186 100644 --- a/core/src/components/modal/utils.ts +++ b/core/src/components/modal/utils.ts @@ -1,4 +1,5 @@ import { win } from '@utils/browser'; +import { onCustomPropertyChange } from '@utils/helpers'; import { StatusBar, Style } from '@utils/native/status-bar'; /** @@ -84,3 +85,10 @@ export const setCardStatusBarDefault = (defaultStyle = Style.Default) => { StatusBar.setStyle({ style: defaultStyle }); }; + +/** + * Calls back when the modal's resolved `--height` changes. + */ +export const onModalHeightChange = (hostEl: HTMLElement, callback: () => void): (() => void) => { + return onCustomPropertyChange(hostEl, '--height', () => callback()); +}; diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 38614c46804..a15be099615 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -159,7 +159,7 @@ button { .select-text { flex: 1; - min-width: 16px; + min-width: $form-control-min-width; font-size: inherit; diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 7c3f7f7477f..a8fd05996af 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -1,11 +1,26 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; -import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core'; +import { + Build, + Component, + Element, + Event, + Host, + Listen, + Method, + Prop, + State, + Watch, + h, + forceUpdate, +} from '@stencil/core'; import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config'; -import type { NotchController, StartContainerController } from '@utils/forms'; +import type { ClickController, NotchController, StartContainerController } from '@utils/forms'; import { compareOptions, + createClickController, createNotchController, createStartContainerController, + getSlottedClickContent, isOptionSelected, checkInvalidState, } from '@utils/forms'; @@ -91,6 +106,8 @@ export class Select implements ComponentInterface { private startContainerEl: HTMLElement | undefined; private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT); + private clickController?: ClickController; + @Element() el!: HTMLIonSelectElement; @State() isExpanded = false; @@ -364,6 +381,8 @@ export class Select implements ComponentInterface { this.startContainerController.calculateStartContainerWidth(); + this.clickController = createClickController(el); + this.updateOverlayOptions(); this.emitStyle(); @@ -993,42 +1012,39 @@ export class Select implements ComponentInterface { this.ionStyle.emit(style); } + /** + * The label wrapping the slots has no `for` attribute, so the browser + * forwards a click on slotted content to the label's first labelable + * descendant, the internal button. That forwarded click bubbles back out of + * the shadow root targeting the host, where it would be emitted a second + * time and open the select. The controller swallows it during the capture + * phase, leaving the click on the slotted content itself alone so slotted + * links, checkboxes and buttons keep their default behavior. + */ + @Listen('click', { capture: true }) + onClickCapture(ev: Event) { + this.clickController?.handleClickCapture(ev); + } + private onClick = (ev: UIEvent) => { - const target = ev.target as HTMLElement; - const closestSlot = target.closest('[slot="start"], [slot="end"]'); + const slotted = getSlottedClickContent(ev, this.el); - if (target === this.el || closestSlot === null) { - this.setFocus(); - this.open(ev); - } else { - /** - * Prevent clicks to the start/end slots from opening the select. - * We ensure the target isn't this element in case the select is slotted - * in, for example, an item. This would prevent the select from ever - * being opened since the element itself has slot="start"/"end". - * - * Clicking a slotted element also causes a click - * on the