diff --git a/CHANGELOG.md b/CHANGELOG.md index d4ae26b29d..893f7c520a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,34 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.2.2](https://github.com/ionic-team/ionic-framework/compare/v7.2.1...v7.2.2) (2023-08-02) + + +### Bug Fixes + +* **datetime-button:** render correct text when passing partial date values ([#27816](https://github.com/ionic-team/ionic-framework/issues/27816)) ([bd1910b](https://github.com/ionic-team/ionic-framework/commit/bd1910ba69348877ad5f99d9db2b59d06693b91e)), closes [#27797](https://github.com/ionic-team/ionic-framework/issues/27797) +* **input, textarea:** input does not block floating label ([#27870](https://github.com/ionic-team/ionic-framework/issues/27870)) ([f14c440](https://github.com/ionic-team/ionic-framework/commit/f14c440d6321ef9f168b272338e5cd21cab384ef)), closes [#27812](https://github.com/ionic-team/ionic-framework/issues/27812) +* **item-options:** use correct safe area padding ([#27853](https://github.com/ionic-team/ionic-framework/issues/27853)) ([0b8f1bc](https://github.com/ionic-team/ionic-framework/commit/0b8f1bc7dd4170a2a8c9ed3aede173dd489b25ea)) +* **radio:** radios can be focused and are announced with group ([#27817](https://github.com/ionic-team/ionic-framework/issues/27817)) ([ba2f49b](https://github.com/ionic-team/ionic-framework/commit/ba2f49b8a460520d20ac198db800ea2d9e5b015f)), closes [#27438](https://github.com/ionic-team/ionic-framework/issues/27438) +* **react, vue:** custom animations are used when going back ([#27895](https://github.com/ionic-team/ionic-framework/issues/27895)) ([824033f](https://github.com/ionic-team/ionic-framework/commit/824033f1d4b4a3e5d4c6a978a39e5bb1f33b5bb4)), closes [#27873](https://github.com/ionic-team/ionic-framework/issues/27873) +* **select:** popover uses modern form syntax ([#27818](https://github.com/ionic-team/ionic-framework/issues/27818)) ([0c117cf](https://github.com/ionic-team/ionic-framework/commit/0c117cfe7f383b7c7837d27de5a6eee12ddd6c2f)), closes [#27071](https://github.com/ionic-team/ionic-framework/issues/27071) [#27786](https://github.com/ionic-team/ionic-framework/issues/27786) + + + + + +## [7.2.1](https://github.com/ionic-team/ionic-framework/compare/v7.2.0...v7.2.1) (2023-07-26) + + +### Bug Fixes + +* **item-sliding:** buttons are not interactive on close ([#27829](https://github.com/ionic-team/ionic-framework/issues/27829)) ([6e4919c](https://github.com/ionic-team/ionic-framework/commit/6e4919caff90fc60988e5cc85ad7161844eb5b51)), closes [#22722](https://github.com/ionic-team/ionic-framework/issues/22722) +* **modal:** body background is reset with inline card modals ([#27835](https://github.com/ionic-team/ionic-framework/issues/27835)) ([38626d9](https://github.com/ionic-team/ionic-framework/commit/38626d96809d1c6be523ea62a4fac1dec73ee891)), closes [#27830](https://github.com/ionic-team/ionic-framework/issues/27830) + + + + + # [7.2.0](https://github.com/ionic-team/ionic-framework/compare/v7.1.4...v7.2.0) (2023-07-19) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index c30a907cae..d2a2252490 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [7.2.2](https://github.com/ionic-team/ionic-framework/compare/v7.2.1...v7.2.2) (2023-08-02) + + +### Bug Fixes + +* **datetime-button:** render correct text when passing partial date values ([#27816](https://github.com/ionic-team/ionic-framework/issues/27816)) ([bd1910b](https://github.com/ionic-team/ionic-framework/commit/bd1910ba69348877ad5f99d9db2b59d06693b91e)), closes [#27797](https://github.com/ionic-team/ionic-framework/issues/27797) +* **input, textarea:** input does not block floating label ([#27870](https://github.com/ionic-team/ionic-framework/issues/27870)) ([f14c440](https://github.com/ionic-team/ionic-framework/commit/f14c440d6321ef9f168b272338e5cd21cab384ef)), closes [#27812](https://github.com/ionic-team/ionic-framework/issues/27812) +* **item-options:** use correct safe area padding ([#27853](https://github.com/ionic-team/ionic-framework/issues/27853)) ([0b8f1bc](https://github.com/ionic-team/ionic-framework/commit/0b8f1bc7dd4170a2a8c9ed3aede173dd489b25ea)) +* **radio:** radios can be focused and are announced with group ([#27817](https://github.com/ionic-team/ionic-framework/issues/27817)) ([ba2f49b](https://github.com/ionic-team/ionic-framework/commit/ba2f49b8a460520d20ac198db800ea2d9e5b015f)), closes [#27438](https://github.com/ionic-team/ionic-framework/issues/27438) +* **select:** popover uses modern form syntax ([#27818](https://github.com/ionic-team/ionic-framework/issues/27818)) ([0c117cf](https://github.com/ionic-team/ionic-framework/commit/0c117cfe7f383b7c7837d27de5a6eee12ddd6c2f)), closes [#27071](https://github.com/ionic-team/ionic-framework/issues/27071) [#27786](https://github.com/ionic-team/ionic-framework/issues/27786) + + + + + +## [7.2.1](https://github.com/ionic-team/ionic-framework/compare/v7.2.0...v7.2.1) (2023-07-26) + + +### Bug Fixes + +* **item-sliding:** buttons are not interactive on close ([#27829](https://github.com/ionic-team/ionic-framework/issues/27829)) ([6e4919c](https://github.com/ionic-team/ionic-framework/commit/6e4919caff90fc60988e5cc85ad7161844eb5b51)), closes [#22722](https://github.com/ionic-team/ionic-framework/issues/22722) +* **modal:** body background is reset with inline card modals ([#27835](https://github.com/ionic-team/ionic-framework/issues/27835)) ([38626d9](https://github.com/ionic-team/ionic-framework/commit/38626d96809d1c6be523ea62a4fac1dec73ee891)), closes [#27830](https://github.com/ionic-team/ionic-framework/issues/27830) + + + + + # [7.2.0](https://github.com/ionic-team/ionic-framework/compare/v7.1.4...v7.2.0) (2023-07-19) diff --git a/core/package-lock.json b/core/package-lock.json index 0c2f525deb..7081813a93 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/core", - "version": "7.2.0", + "version": "7.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "7.2.0", + "version": "7.2.2", "license": "MIT", "dependencies": { "@stencil/core": "^4.0.3", @@ -15,19 +15,19 @@ }, "devDependencies": { "@axe-core/playwright": "^4.7.3", - "@capacitor/core": "^5.2.1", + "@capacitor/core": "^5.2.2", "@capacitor/haptics": "^5.0.6", "@capacitor/keyboard": "^5.0.6", "@capacitor/status-bar": "^5.0.6", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@jest/core": "^27.5.1", - "@playwright/test": "^1.36.1", + "@playwright/test": "^1.36.2", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", "@stencil/angular-output-target": "^0.7.1", "@stencil/react-output-target": "^0.5.3", - "@stencil/sass": "^3.0.4", + "@stencil/sass": "^3.0.5", "@stencil/vue-output-target": "^0.8.6", "@types/jest": "^27.5.2", "@types/node": "^14.6.0", @@ -607,9 +607,9 @@ "dev": true }, "node_modules/@capacitor/core": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.2.1.tgz", - "integrity": "sha512-v7nzTQZj9l99Sp0v8C7Zq8QX6Cg5ljq7ASneWk/Hc5nBR5LOj/k3a+yEx/RoclWtkxJfs89Y5k+KJTFFQ6cLoA==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.2.2.tgz", + "integrity": "sha512-3jKECZC5+YD2rljMZm1e/K3AYyoxUmLDZCyofTPbRYPBSI0wJh5ZCkX+XIGzNM0o/Wokl3Voa1JB8xsLC0MPxA==", "dev": true, "dependencies": { "tslib": "^2.1.0" @@ -1541,13 +1541,13 @@ } }, "node_modules/@playwright/test": { - "version": "1.36.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.36.1.tgz", - "integrity": "sha512-YK7yGWK0N3C2QInPU6iaf/L3N95dlGdbsezLya4n0ZCh3IL7VgPGxC6Gnznh9ApWdOmkJeleT2kMTcWPRZvzqg==", + "version": "1.36.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.36.2.tgz", + "integrity": "sha512-2rVZeyPRjxfPH6J0oGJqE8YxiM1IBRyM8hyrXYK7eSiAqmbNhxwcLa7dZ7fy9Kj26V7FYia5fh9XJRq4Dqme+g==", "dev": true, "dependencies": { "@types/node": "*", - "playwright-core": "1.36.1" + "playwright-core": "1.36.2" }, "bin": { "playwright": "cli.js" @@ -1655,10 +1655,14 @@ } }, "node_modules/@stencil/sass": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz", - "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.5.tgz", + "integrity": "sha512-9nyllMXOEvHywo6fP2iwXgnq32A+OOUE36Aq7iUjzwT3wdr04qsvupO1JNIyRvmvCDF15hOKXztrZH1/wDu2Zg==", "dev": true, + "engines": { + "node": ">=12.0.0", + "npm": ">=6.0.0" + }, "peerDependencies": { "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0" } @@ -8190,9 +8194,9 @@ } }, "node_modules/playwright-core": { - "version": "1.36.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.1.tgz", - "integrity": "sha512-7+tmPuMcEW4xeCL9cp9KxmYpQYHKkyjwoXRnoeTowaeNat8PoBMk/HwCYhqkH2fRkshfKEOiVus/IhID2Pg8kg==", + "version": "1.36.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.2.tgz", + "integrity": "sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -10784,9 +10788,9 @@ "dev": true }, "@capacitor/core": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.2.1.tgz", - "integrity": "sha512-v7nzTQZj9l99Sp0v8C7Zq8QX6Cg5ljq7ASneWk/Hc5nBR5LOj/k3a+yEx/RoclWtkxJfs89Y5k+KJTFFQ6cLoA==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.2.2.tgz", + "integrity": "sha512-3jKECZC5+YD2rljMZm1e/K3AYyoxUmLDZCyofTPbRYPBSI0wJh5ZCkX+XIGzNM0o/Wokl3Voa1JB8xsLC0MPxA==", "dev": true, "requires": { "tslib": "^2.1.0" @@ -11451,14 +11455,14 @@ } }, "@playwright/test": { - "version": "1.36.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.36.1.tgz", - "integrity": "sha512-YK7yGWK0N3C2QInPU6iaf/L3N95dlGdbsezLya4n0ZCh3IL7VgPGxC6Gnznh9ApWdOmkJeleT2kMTcWPRZvzqg==", + "version": "1.36.2", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.36.2.tgz", + "integrity": "sha512-2rVZeyPRjxfPH6J0oGJqE8YxiM1IBRyM8hyrXYK7eSiAqmbNhxwcLa7dZ7fy9Kj26V7FYia5fh9XJRq4Dqme+g==", "dev": true, "requires": { "@types/node": "*", "fsevents": "2.3.2", - "playwright-core": "1.36.1" + "playwright-core": "1.36.2" } }, "@rollup/plugin-node-resolve": { @@ -11532,9 +11536,9 @@ "requires": {} }, "@stencil/sass": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz", - "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.5.tgz", + "integrity": "sha512-9nyllMXOEvHywo6fP2iwXgnq32A+OOUE36Aq7iUjzwT3wdr04qsvupO1JNIyRvmvCDF15hOKXztrZH1/wDu2Zg==", "dev": true, "requires": {} }, @@ -16328,9 +16332,9 @@ } }, "playwright-core": { - "version": "1.36.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.1.tgz", - "integrity": "sha512-7+tmPuMcEW4xeCL9cp9KxmYpQYHKkyjwoXRnoeTowaeNat8PoBMk/HwCYhqkH2fRkshfKEOiVus/IhID2Pg8kg==", + "version": "1.36.2", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.36.2.tgz", + "integrity": "sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==", "dev": true }, "postcss": { diff --git a/core/package.json b/core/package.json index 4a18c08d3f..c5a7282a51 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "7.2.0", + "version": "7.2.2", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -37,19 +37,19 @@ }, "devDependencies": { "@axe-core/playwright": "^4.7.3", - "@capacitor/core": "^5.2.1", + "@capacitor/core": "^5.2.2", "@capacitor/haptics": "^5.0.6", "@capacitor/keyboard": "^5.0.6", "@capacitor/status-bar": "^5.0.6", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@jest/core": "^27.5.1", - "@playwright/test": "^1.36.1", + "@playwright/test": "^1.36.2", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", "@stencil/angular-output-target": "^0.7.1", "@stencil/react-output-target": "^0.5.3", - "@stencil/sass": "^3.0.4", + "@stencil/sass": "^3.0.5", "@stencil/vue-output-target": "^0.8.6", "@types/jest": "^27.5.2", "@types/node": "^14.6.0", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 0b839d4ee7..7a0c2638ba 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2176,7 +2176,7 @@ export namespace Components { */ "side": PositionSide; /** - * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be determined by the content in the popover. + * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value. */ "size": PopoverSize; /** @@ -6189,7 +6189,7 @@ declare namespace LocalJSX { */ "side"?: PositionSide; /** - * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be determined by the content in the popover. + * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value. */ "size"?: PopoverSize; /** diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx index e6854c8fdd..01fcc34752 100644 --- a/core/src/components/action-sheet/action-sheet.tsx +++ b/core/src/components/action-sheet/action-sheet.tsx @@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core'; import type { Gesture } from '@utils/gesture'; import { createButtonActiveGesture } from '@utils/gesture/button-active'; +import { raf } from '@utils/helpers'; import { BACKDROP, createDelegateController, @@ -318,25 +319,32 @@ export class ActionSheet implements ComponentInterface, OverlayInterface { componentDidLoad() { /** - * Do not create gesture if: - * 1. A gesture already exists - * 2. App is running in MD mode - * 3. A wrapper ref does not exist + * Only create gesture if: + * 1. A gesture does not already exist + * 2. App is running in iOS mode + * 3. A wrapper ref exists + * 4. A group ref exists */ const { groupEl, wrapperEl } = this; - if (this.gesture || getIonMode(this) === 'md' || !wrapperEl || !groupEl) { - return; + if (!this.gesture && getIonMode(this) === 'ios' && wrapperEl && groupEl) { + readTask(() => { + const isScrollable = groupEl.scrollHeight > groupEl.clientHeight; + if (!isScrollable) { + this.gesture = createButtonActiveGesture(wrapperEl, (refEl: HTMLElement) => + refEl.classList.contains('action-sheet-button') + ); + this.gesture.enable(true); + } + }); } - readTask(() => { - const isScrollable = groupEl.scrollHeight > groupEl.clientHeight; - if (!isScrollable) { - this.gesture = createButtonActiveGesture(wrapperEl, (refEl: HTMLElement) => - refEl.classList.contains('action-sheet-button') - ); - this.gesture.enable(true); - } - }); + /** + * If action sheet was rendered with isOpen="true" + * then we should open action sheet immediately. + */ + if (this.isOpen === true) { + raf(() => this.present()); + } } render() { diff --git a/core/src/components/action-sheet/test/is-open/action-sheet.e2e.ts b/core/src/components/action-sheet/test/is-open/action-sheet.e2e.ts index 66eca8e6f0..512921485e 100644 --- a/core/src/components/action-sheet/test/is-open/action-sheet.e2e.ts +++ b/core/src/components/action-sheet/test/is-open/action-sheet.e2e.ts @@ -30,5 +30,10 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ config, title }) => await expect(actionSheet).toBeHidden(); }); + + test('should open if isOpen is true on load', async ({ page }) => { + await page.setContent('', config); + await expect(page.locator('ion-action-sheet')).toBeVisible(); + }); }); }); diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 4b89c605f6..6e5c48d605 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -3,6 +3,7 @@ import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpda import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config'; import type { Gesture } from '@utils/gesture'; import { createButtonActiveGesture } from '@utils/gesture/button-active'; +import { raf } from '@utils/helpers'; import { createDelegateController, createTriggerController, @@ -346,19 +347,25 @@ export class Alert implements ComponentInterface, OverlayInterface { componentDidLoad() { /** - * Do not create gesture if: - * 1. A gesture already exists - * 2. App is running in MD mode - * 3. A wrapper ref does not exist + * Only create gesture if: + * 1. A gesture does not already exist + * 2. App is running in iOS mode + * 3. A wrapper ref exists */ - if (this.gesture || getIonMode(this) === 'md' || !this.wrapperEl) { - return; + if (!this.gesture && getIonMode(this) === 'ios' && this.wrapperEl) { + this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl: HTMLElement) => + refEl.classList.contains('alert-button') + ); + this.gesture.enable(true); } - this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl: HTMLElement) => - refEl.classList.contains('alert-button') - ); - this.gesture.enable(true); + /** + * If alert was rendered with isOpen="true" + * then we should open alert immediately. + */ + if (this.isOpen === true) { + raf(() => this.present()); + } } /** diff --git a/core/src/components/alert/test/is-open/alert.e2e.ts b/core/src/components/alert/test/is-open/alert.e2e.ts index 5fa7980c7e..84fadf6997 100644 --- a/core/src/components/alert/test/is-open/alert.e2e.ts +++ b/core/src/components/alert/test/is-open/alert.e2e.ts @@ -29,5 +29,10 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ config, title }) => await ionAlertDidDismiss.next(); await expect(alert).toBeHidden(); }); + + test('should open if isOpen is true on load', async ({ page }) => { + await page.setContent('', config); + await expect(page.locator('ion-alert')).toBeVisible(); + }); }); }); diff --git a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts index 998d57fec2..b52ff42462 100644 --- a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts +++ b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts @@ -122,6 +122,42 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { await expect(dateTarget).toContainText('May 10, 2023'); }); + test('should set only month and year when only passing month and year', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/27797', + }); + + await page.setContent( + ` + + + `, + config + ); + await page.waitForSelector('.datetime-ready'); + + await expect(page.locator('#date-button')).toContainText('January 2022'); + await expect(page.locator('#time-button')).toBeHidden(); + }); + test('should set only year when passing only year', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/27797', + }); + + await page.setContent( + ` + + + `, + config + ); + await page.waitForSelector('.datetime-ready'); + + await expect(page.locator('#date-button')).toContainText('2022'); + await expect(page.locator('#time-button')).toBeHidden(); + }); }); test.describe(title('datetime-button: locale'), () => { diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index a09eb0fdad..8afefa45ac 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -883,21 +883,18 @@ export class Datetime implements ComponentInterface { const getChangedMonth = (parts: DatetimeParts): DatetimeParts | undefined => { const box = calendarBodyRef.getBoundingClientRect(); - const root = this.el!.shadowRoot!; /** - * Get the element that is in the center of the calendar body. - * This will be an element inside of the active month. + * If the current scroll position is all the way to the left + * then we have scrolled to the previous month. + * Otherwise, assume that we have scrolled to the next + * month. We have a tolerance of 2px to account for + * sub pixel rendering. + * + * Check below the next line ensures that we did not + * swipe and abort (i.e. we swiped but we are still on the current month). */ - const elementAtCenter = root.elementFromPoint(box.x + box.width / 2, box.y + box.height / 2); - /** - * If there is no element then the - * component may be re-rendering on a slow device. - */ - if (!elementAtCenter) return; - - const month = elementAtCenter.closest('.calendar-month'); - if (!month) return; + const month = calendarBodyRef.scrollLeft <= 2 ? startMonth : endMonth; /** * The edge of the month must be lined up with diff --git a/core/src/components/datetime/test/minmax/datetime.e2e.ts b/core/src/components/datetime/test/minmax/datetime.e2e.ts index 2c44afa258..ae25f71f49 100644 --- a/core/src/components/datetime/test/minmax/datetime.e2e.ts +++ b/core/src/components/datetime/test/minmax/datetime.e2e.ts @@ -301,21 +301,20 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => `, config ); const datetime = page.locator('ion-datetime'); - const monthYearToggle = page.locator('ion-datetime .calendar-month-year'); const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)'); + const ionChange = await page.spyOnEvent('ionChange'); - await monthYearToggle.click(); - await page.waitForChanges(); + await page.waitForSelector('.datetime-ready'); await monthColumnItems.nth(0).click(); // switch to January - await page.waitForChanges(); + await ionChange.next(); await expect(datetime).toHaveJSProperty('value', '2022-01-15T00:00:00'); }); diff --git a/core/src/components/datetime/test/set-value/datetime.e2e.ts b/core/src/components/datetime/test/set-value/datetime.e2e.ts index 821affaa63..4012605fa5 100644 --- a/core/src/components/datetime/test/set-value/datetime.e2e.ts +++ b/core/src/components/datetime/test/set-value/datetime.e2e.ts @@ -34,13 +34,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => `, config ); + await page.waitForSelector('.datetime-ready'); const datetime = page.locator('ion-datetime'); const activeDayButton = page.locator('.calendar-day-active'); const monthYearButton = page.locator('.calendar-month-year'); const monthColumn = page.locator('.month-column'); - const yearColumn = page.locator('.year-column'); + const ionChange = await page.spyOnEvent('ionChange'); await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-10-05')); @@ -49,11 +50,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await page.waitForChanges(); // Select October 2021 + // The year will automatically switch to 2021 when selecting 10 await monthColumn.locator('.picker-item[data-value="10"]').click(); - await page.waitForChanges(); - - await yearColumn.locator('.picker-item[data-value="2021"]').click(); - await page.waitForChanges(); + await ionChange.next(); // Close month/year picker await monthYearButton.click(); diff --git a/core/src/components/datetime/utils/format.ts b/core/src/components/datetime/utils/format.ts index 7453879fd6..179bf515e0 100644 --- a/core/src/components/datetime/utils/format.ts +++ b/core/src/components/datetime/utils/format.ts @@ -113,7 +113,7 @@ export const generateDayAriaLabel = (locale: string, today: boolean, refParts: D /** * MM/DD/YYYY will return midnight in the user's timezone. */ - const date = new Date(`${refParts.month}/${refParts.day}/${refParts.year} GMT+0000`); + const date = getNormalizedDate(refParts); const labelString = new Intl.DateTimeFormat(locale, { weekday: 'long', @@ -134,7 +134,7 @@ export const generateDayAriaLabel = (locale: string, today: boolean, refParts: D * Used for the header in MD mode. */ export const getMonthAndDay = (locale: string, refParts: DatetimeParts) => { - const date = new Date(`${refParts.month}/${refParts.day}/${refParts.year} GMT+0000`); + const date = getNormalizedDate(refParts); return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }).format( date ); @@ -147,7 +147,7 @@ export const getMonthAndDay = (locale: string, refParts: DatetimeParts) => { * Example: May 2021 */ export const getMonthAndYear = (locale: string, refParts: DatetimeParts) => { - const date = new Date(`${refParts.month}/${refParts.day}/${refParts.year} GMT+0000`); + const date = getNormalizedDate(refParts); return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date); }; @@ -183,11 +183,25 @@ export const getYear = (locale: string, refParts: DatetimeParts) => { return getLocalizedDateTime(locale, refParts, { year: 'numeric' }); }; -const getNormalizedDate = (refParts: DatetimeParts) => { +/** + * Given reference parts, return a JS Date object + * with a normalized time. + */ +export const getNormalizedDate = (refParts: DatetimeParts) => { const timeString = refParts.hour !== undefined && refParts.minute !== undefined ? ` ${refParts.hour}:${refParts.minute}` : ''; - return new Date(`${refParts.month}/${refParts.day}/${refParts.year}${timeString} GMT+0000`); + /** + * We use / notation here for the date + * so we do not need to do extra work and pad values with zeroes. + * Values such as YYYY-MM are still valid, so + * we add fallback values so we still get + * a valid date otherwise we will pass in a string + * like "//2023". Some browsers, such as Chrome, will + * account for this and still return a valid date. However, + * this is not a consistent behavior across all browsers. + */ + return new Date(`${refParts.month ?? 1}/${refParts.day ?? 1}/${refParts.year ?? 2023}${timeString} GMT+0000`); }; /** diff --git a/core/src/components/input/input.md.outline.scss b/core/src/components/input/input.md.outline.scss index 4efbd2fcdd..488ada9217 100644 --- a/core/src/components/input/input.md.outline.scss +++ b/core/src/components/input/input.md.outline.scss @@ -82,8 +82,6 @@ :host(.input-fill-outline) .label-text-wrapper, :host(.input-fill-outline) .label-text-wrapper { position: relative; - - z-index: 1; } /** diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 4a18956e01..962f1cd934 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -581,6 +581,13 @@ @include transform-origin(start, top); max-width: 100%; + + /** + * The 2 ensures the label + * remains on top of any browser + * autofill background too. + */ + z-index: 2; } /** diff --git a/core/src/components/input/test/label-placement/input.e2e.ts b/core/src/components/input/test/label-placement/input.e2e.ts index 218e718a3d..2dc2179338 100644 --- a/core/src/components/input/test/label-placement/input.e2e.ts +++ b/core/src/components/input/test/label-placement/input.e2e.ts @@ -186,9 +186,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-slot-truncate`)); }); }); -}); - -configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('input: async label'), () => { test('input should re-render when label slot is added async', async ({ page }) => { await page.setContent( @@ -213,4 +210,27 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-async-label`)); }); }); + test.describe(title('input: floating/stacked label layering'), () => { + test('label should not be covered by text field', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/27812', + }); + await page.setContent( + ` + + + `, + config + ); + + const input = page.locator('ion-input'); + + expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-label-layering`)); + }); + }); }); diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..073224da4e Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5452a219ab Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0fa20ccd64 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-label-layering-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-options/item-options.scss b/core/src/components/item-options/item-options.scss index 50774c6856..c35b53fddb 100644 --- a/core/src/components/item-options/item-options.scss +++ b/core/src/components/item-options/item-options.scss @@ -56,15 +56,17 @@ ion-item-options { } } -.item-options-start ion-item-option:first-child { - @include padding-horizontal(null, var(--ion-safe-area-left)); - +/* stylelint-disable property-disallowed-list */ +[dir="ltr"] .item-options-start ion-item-option:first-child, +[dir="rtl"] .item-options-start ion-item-option:last-child { + padding-left: var(--ion-safe-area-left); } -.item-options-end ion-item-option:last-child { - @include padding-horizontal(null, var(--ion-safe-area-right)); - +[dir="ltr"] .item-options-end ion-item-option:last-child, +[dir="rtl"] .item-options-end ion-item-option:first-child { + padding-right: var(--ion-safe-area-right); } +/* stylelint-enable property-disallowed-list */ .item-sliding-active-slide { @include rtl() { diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx index 3b17a78fce..d495580d7a 100644 --- a/core/src/components/item-options/item-options.tsx +++ b/core/src/components/item-options/item-options.tsx @@ -45,6 +45,14 @@ export class ItemOptions implements ComponentInterface { // Used internally for styling [`item-options-${mode}`]: true, + /** + * Note: The "start" and "end" terms refer to the + * direction ion-item-option instances within ion-item-options flow. + * They do not refer to how ion-item-options flows within ion-item-sliding. + * As a result, "item-options-start" means the ion-item-options container + * always appears on the left, and "item-options-end" means the ion-item-options + * container always appears on the right. + */ 'item-options-start': !isEnd, 'item-options-end': isEnd, }} diff --git a/core/src/components/item-sliding/item-sliding.scss b/core/src/components/item-sliding/item-sliding.scss index 0e2cc06795..c52b8d5d4e 100644 --- a/core/src/components/item-sliding/item-sliding.scss +++ b/core/src/components/item-sliding/item-sliding.scss @@ -29,6 +29,9 @@ ion-item-sliding .item { will-change: transform; } +.item-sliding-closing ion-item-options { + pointer-events: none; +} .item-sliding-active-swipe-end .item-options-end .item-option-expandable { @include multi-dir() { diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index c6f4546809..a250b5e9bf 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -76,12 +76,19 @@ export class ItemSliding implements ComponentInterface { this.item = el.querySelector('ion-item'); this.contentEl = findClosestIonContent(el); - await this.updateOptions(); - + /** + * The MutationObserver needs to be added before we + * call updateOptions below otherwise we may miss + * ion-item-option elements that are added to the DOM + * while updateOptions is running and before the MutationObserver + * has been initialized. + */ this.mutationObserver = watchForOptions(el, 'ion-item-option', async () => { await this.updateOptions(); }); + await this.updateOptions(); + this.gesture = (await import('../../utils/gesture')).createGesture({ el, gestureName: 'item-swipe', @@ -407,6 +414,9 @@ export class ItemSliding implements ComponentInterface { if (!this.item) { return; } + + const { el } = this; + const style = this.item.style; this.openAmount = openAmount; @@ -425,6 +435,12 @@ export class ItemSliding implements ComponentInterface { ? SlidingState.Start | SlidingState.SwipeStart : SlidingState.Start; } else { + /** + * The sliding options should not be + * clickable while the item is closing. + */ + el.classList.add('item-sliding-closing'); + /** * Item sliding cannot be interrupted * while closing the item. If it did, @@ -441,6 +457,7 @@ export class ItemSliding implements ComponentInterface { if (this.gesture) { this.gesture.enable(!this.disabled); } + el.classList.remove('item-sliding-closing'); }, 600); openSlidingItem = undefined; diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 4e06b0ec52..6e2d48186d 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -398,7 +398,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac }); const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null; const fillValue = fill || 'none'; - const inList = hostContext('ion-list', this.el); + const inList = hostContext('ion-list', this.el) && !hostContext('ion-radio-group', this.el); return ( { + it('should not have a role when used without list', async () => { + const page = await newSpecPage({ + components: [Item], + html: `Hello World`, + }); + + const item = page.body.querySelector('ion-item'); + expect(item.getAttribute('role')).toBe(null); + }); + + it('should have a listitem role when used inside list', async () => { + const page = await newSpecPage({ + components: [Item, List], + html: ` + + + Hello World + + + `, + }); + + const item = page.body.querySelector('ion-item'); + expect(item.getAttribute('role')).toBe('listitem'); + }); + + it('should not have a role when used inside radio group and list', async () => { + const page = await newSpecPage({ + components: [Radio, RadioGroup, Item, List], + html: ` + + + + + + + + `, + }); + + const item = page.body.querySelector('ion-item'); + expect(item.getAttribute('role')).toBe(null); + }); +}); diff --git a/core/src/components/loading/test/is-open/loading.e2e.ts b/core/src/components/loading/test/is-open/loading.e2e.ts index 9a3020b2d0..06bfdcacb9 100644 --- a/core/src/components/loading/test/is-open/loading.e2e.ts +++ b/core/src/components/loading/test/is-open/loading.e2e.ts @@ -23,5 +23,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await ionLoadingDidDismiss.next(); await expect(loading).toBeHidden(); }); + + test('should open if isOpen is true on load', async ({ page }) => { + await page.setContent('', config); + await expect(page.locator('ion-loading')).toBeVisible(); + }); }); }); diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts index 7fc235dea7..914652878f 100644 --- a/core/src/components/modal/animations/ios.leave.ts +++ b/core/src/components/modal/animations/ios.leave.ts @@ -51,9 +51,9 @@ export const iosLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptio presentingEl.style.setProperty('overflow', ''); - const numModals = Array.from(bodyEl.querySelectorAll('ion-modal')).filter( - (m) => m.presentingElement !== undefined - ).length; + const numModals = ( + Array.from(bodyEl.querySelectorAll('ion-modal:not(.overlay-hidden)')) as HTMLIonModalElement[] + ).filter((m) => m.presentingElement !== undefined).length; if (numModals <= 1) { bodyEl.style.setProperty('background-color', ''); } diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts index 9dafceff0d..0e3fca6b8b 100644 --- a/core/src/components/modal/gestures/sheet.ts +++ b/core/src/components/modal/gestures/sheet.ts @@ -31,6 +31,12 @@ export interface MoveSheetToBreakpointOptions { * `true` if the sheet can be transitioned and dismissed off the view. */ canDismiss?: boolean; + + /** + * If `true`, the sheet will animate to the breakpoint. + * If `false`, the sheet will jump directly to the breakpoint. + */ + animated: boolean; } export const createSheetGesture = ( @@ -246,11 +252,17 @@ export const createSheetGesture = ( breakpoint: closest, breakpointOffset: offset, canDismiss: canDismissBlocksGesture, + + /** + * The swipe is user-driven, so we should + * always animate when the gesture ends. + */ + animated: true, }); }; const moveSheetToBreakpoint = (options: MoveSheetToBreakpointOptions) => { - const { breakpoint, canDismiss, breakpointOffset } = options; + const { breakpoint, canDismiss, breakpointOffset, animated } = options; /** * canDismiss should only prevent snapping * when users are trying to dismiss. If canDismiss @@ -360,7 +372,7 @@ export const createSheetGesture = ( }, { oneTimeCallback: true } ) - .progressEnd(1, 0, 500); + .progressEnd(1, 0, animated ? 500 : 0); }); }; diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index 8068179c38..0a2dd0f8a8 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -761,7 +761,7 @@ export class Modal implements ComponentInterface, OverlayInterface { return; } - const { currentBreakpoint, moveSheetToBreakpoint, canDismiss, breakpoints } = this; + const { currentBreakpoint, moveSheetToBreakpoint, canDismiss, breakpoints, animated } = this; if (currentBreakpoint === breakpoint) { return; @@ -772,6 +772,7 @@ export class Modal implements ComponentInterface, OverlayInterface { breakpoint, breakpointOffset: 1 - currentBreakpoint!, canDismiss: canDismiss !== undefined && canDismiss !== true && breakpoints![0] === 0, + animated, }); await this.sheetTransition; this.sheetTransition = undefined; diff --git a/core/src/components/modal/test/is-open/modal.e2e.ts b/core/src/components/modal/test/is-open/modal.e2e.ts index b56e0333d2..651505f43f 100644 --- a/core/src/components/modal/test/is-open/modal.e2e.ts +++ b/core/src/components/modal/test/is-open/modal.e2e.ts @@ -20,5 +20,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await ionModalDidDismiss.next(); await expect(modal).toBeHidden(); }); + + test('should open if isOpen is true on load', async ({ page }) => { + await page.setContent('', config); + await expect(page.locator('ion-modal')).toBeVisible(); + }); }); }); diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index d6290dee71..6cc7a321f3 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -31,7 +31,7 @@ import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToVie export class Nav implements NavOutlet { private transInstr: TransitionInstruction[] = []; private sbAni?: Animation; - private animationEnabled = true; + private gestureOrAnimationInProgress = false; private useRouter = false; private isTransitioning = false; private destroyed = false; @@ -869,7 +869,36 @@ export class Nav implements NavOutlet { // or if it is a portal (modal, actionsheet, etc.) const opts = ti.opts!; - const progressCallback = opts.progressAnimation ? (ani: Animation | undefined) => (this.sbAni = ani) : undefined; + const progressCallback = opts.progressAnimation + ? (ani: Animation | undefined) => { + /** + * Because this progress callback is called asynchronously + * it is possible for the gesture to start and end before + * the animation is ever set. In that scenario, we should + * immediately call progressEnd so that the transition promise + * resolves and the gesture does not get locked up. + */ + if (ani !== undefined && !this.gestureOrAnimationInProgress) { + this.gestureOrAnimationInProgress = true; + ani.onFinish( + () => { + this.gestureOrAnimationInProgress = false; + }, + { oneTimeCallback: true } + ); + + /** + * Playing animation to beginning + * with a duration of 0 prevents + * any flickering when the animation + * is later cleaned up. + */ + ani.progressEnd(0, 0, 0); + } else { + this.sbAni = ani; + } + } + : undefined; const mode = getIonMode(this); const enteringEl = enteringView.element!; const leavingEl = leavingView && leavingView.element!; @@ -1008,15 +1037,16 @@ export class Nav implements NavOutlet { private canStart(): boolean { return ( + !this.gestureOrAnimationInProgress && !!this.swipeGesture && !this.isTransitioning && this.transInstr.length === 0 && - this.animationEnabled && this.canGoBackSync() ); } private onStart() { + this.gestureOrAnimationInProgress = true; this.pop({ direction: 'back', progressAnimation: true }); } @@ -1028,10 +1058,9 @@ export class Nav implements NavOutlet { private onEnd(shouldComplete: boolean, stepValue: number, dur: number) { if (this.sbAni) { - this.animationEnabled = false; this.sbAni.onFinish( () => { - this.animationEnabled = true; + this.gestureOrAnimationInProgress = false; }, { oneTimeCallback: true } ); @@ -1055,6 +1084,8 @@ export class Nav implements NavOutlet { } this.sbAni.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur); + } else { + this.gestureOrAnimationInProgress = false; } } diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx index 66eeb0aa0c..9f1f587086 100644 --- a/core/src/components/picker/picker.tsx +++ b/core/src/components/picker/picker.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core'; +import { raf } from '@utils/helpers'; import { createDelegateController, createTriggerController, @@ -199,6 +200,16 @@ export class Picker implements ComponentInterface, OverlayInterface { setOverlayId(this.el); } + componentDidLoad() { + /** + * If picker was rendered with isOpen="true" + * then we should open picker immediately. + */ + if (this.isOpen === true) { + raf(() => this.present()); + } + } + /** * Present the picker overlay after it has been created. */ diff --git a/core/src/components/picker/test/is-open/picker.e2e.ts b/core/src/components/picker/test/is-open/picker.e2e.ts index ab977cdb43..026da1abfd 100644 --- a/core/src/components/picker/test/is-open/picker.e2e.ts +++ b/core/src/components/picker/test/is-open/picker.e2e.ts @@ -23,5 +23,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await ionPickerDidDismiss.next(); await expect(picker).toBeHidden(); }); + + test('should open if isOpen is true on load', async ({ page }) => { + await page.setContent('', config); + await expect(page.locator('ion-picker')).toBeVisible(); + }); }); }); diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index bccd795fe7..d32856eedb 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -180,8 +180,7 @@ export class Popover implements ComponentInterface, PopoverInterface { /** * Describes how to calculate the popover width. * If `"cover"`, the popover width will match the width of the trigger. - * If `"auto"`, the popover width will be determined by the content in - * the popover. + * If `"auto"`, the popover width will be set to a static default value. */ @Prop() size: PopoverSize = 'auto'; diff --git a/core/src/components/popover/test/is-open/popover.e2e.ts b/core/src/components/popover/test/is-open/popover.e2e.ts new file mode 100644 index 0000000000..cd3604a2fb --- /dev/null +++ b/core/src/components/popover/test/is-open/popover.e2e.ts @@ -0,0 +1,11 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('popover: isOpen'), () => { + test('should open if isOpen is true on load', async ({ page }) => { + await page.setContent('', config); + await expect(page.locator('ion-popover')).toBeVisible(); + }); + }); +}); diff --git a/core/src/components/radio-group/test/basic/index.html b/core/src/components/radio-group/test/basic/index.html index 5b690307e3..650695cd2b 100644 --- a/core/src/components/radio-group/test/basic/index.html +++ b/core/src/components/radio-group/test/basic/index.html @@ -30,23 +30,19 @@ - Item 1 - + Item 1 - Item 2 - + Item 2 - Item 3 - + Item 3 - Item 4 - + Item 4 diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts b/core/src/components/radio-group/test/basic/radio-group.e2e.ts index 06d6dbad14..96b7b5d955 100644 --- a/core/src/components/radio-group/test/basic/radio-group.e2e.ts +++ b/core/src/components/radio-group/test/basic/radio-group.e2e.ts @@ -1,19 +1,7 @@ import { expect } from '@playwright/test'; -import type { Locator } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -import type { E2EPage } from '@utils/test/playwright'; -configs().forEach(({ title, screenshot, config }) => { - test.describe(title('radio-group: basic'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/radio-group/test/basic`, config); - - const list = page.locator('ion-list'); - - await expect(list).toHaveScreenshot(screenshot(`radio-group-diff`)); - }); - }); -}); +import { RadioFixture } from '../fixtures'; /** * This behavior does not vary across modes/directions. @@ -31,8 +19,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => ` - One - + One `, @@ -48,8 +35,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => ` - One - + One `, @@ -65,8 +51,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => ` - One - + One `, @@ -82,8 +67,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => ` - One - + One `, @@ -99,18 +83,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => ` - Item 1 - + Item 1 - Item 2 - + Item 2 - Item 3 - + Item 3 `, @@ -130,34 +111,3 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); }); }); - -class RadioFixture { - readonly page: E2EPage; - - private radio!: Locator; - - constructor(page: E2EPage) { - this.page = page; - } - - async checkRadio(method: 'keyboard' | 'mouse', selector = 'ion-radio') { - const { page } = this; - const radio = (this.radio = page.locator(selector)); - - if (method === 'keyboard') { - await radio.focus(); - await page.keyboard.press('Space'); - } else { - await radio.click(); - } - - await page.waitForChanges(); - - return radio; - } - - async expectChecked(state: boolean) { - const { radio } = this; - await expect(radio.locator('input')).toHaveJSProperty('checked', state); - } -} diff --git a/core/src/components/radio-group/test/fixtures.ts b/core/src/components/radio-group/test/fixtures.ts new file mode 100644 index 0000000000..21722126d7 --- /dev/null +++ b/core/src/components/radio-group/test/fixtures.ts @@ -0,0 +1,39 @@ +import type { Locator } from '@playwright/test'; +import { expect } from '@playwright/test'; +import type { E2EPage } from '@utils/test/playwright'; + +export class RadioFixture { + readonly page: E2EPage; + + private radio!: Locator; + + constructor(page: E2EPage) { + this.page = page; + } + + async checkRadio(method: 'keyboard' | 'mouse', selector = 'ion-radio') { + const { page } = this; + const radio = (this.radio = page.locator(selector)); + + if (method === 'keyboard') { + await radio.focus(); + await page.keyboard.press('Space'); + } else { + await radio.click(); + } + + await page.waitForChanges(); + + return radio; + } + + async expectChecked(state: boolean) { + const { radio } = this; + + if (state) { + await expect(radio).toHaveClass(/radio-checked/); + } else { + await expect(radio).not.toHaveClass(/radio-checked/); + } + } +} diff --git a/core/src/components/radio-group/test/form/index.html b/core/src/components/radio-group/test/form/index.html index 159f8c6249..6cbe354b4c 100644 --- a/core/src/components/radio-group/test/form/index.html +++ b/core/src/components/radio-group/test/form/index.html @@ -31,32 +31,19 @@ - Biff - - - + Biff - Griff - - - + Griff - Buford - - - + Buford - George - + George diff --git a/core/src/components/radio-group/test/legacy/basic/index.html b/core/src/components/radio-group/test/legacy/basic/index.html new file mode 100644 index 0000000000..5b690307e3 --- /dev/null +++ b/core/src/components/radio-group/test/legacy/basic/index.html @@ -0,0 +1,56 @@ + + + + + Radio Group - Basic + + + + + + + + + + + + + Radio Group - Basic + + + + + + + + Radio Group Header + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + + + + diff --git a/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts new file mode 100644 index 0000000000..470ce52bcc --- /dev/null +++ b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts @@ -0,0 +1,163 @@ +import { expect } from '@playwright/test'; +import type { Locator } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; +import type { E2EPage } from '@utils/test/playwright'; + +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('radio-group: basic'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/radio-group/test/legacy/basic`, config); + + const list = page.locator('ion-list'); + + await expect(list).toHaveScreenshot(screenshot(`radio-group-diff`)); + }); + }); +}); + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('radio-group: interaction'), () => { + let radioFixture: RadioFixture; + + test.beforeEach(({ page }) => { + radioFixture = new RadioFixture(page); + }); + + test('spacebar should not deselect without allowEmptySelection', async ({ page }) => { + await page.setContent( + ` + + + One + + + + `, + config + ); + + await radioFixture.checkRadio('keyboard'); + await radioFixture.expectChecked(true); + }); + + test('spacebar should deselect with allowEmptySelection', async ({ page }) => { + await page.setContent( + ` + + + One + + + + `, + config + ); + + await radioFixture.checkRadio('keyboard'); + await radioFixture.expectChecked(false); + }); + + test('click should not deselect without allowEmptySelection', async ({ page }) => { + await page.setContent( + ` + + + One + + + + `, + config + ); + + await radioFixture.checkRadio('mouse'); + await radioFixture.expectChecked(true); + }); + + test('click should deselect with allowEmptySelection', async ({ page }) => { + await page.setContent( + ` + + + One + + + + `, + config + ); + + await radioFixture.checkRadio('mouse'); + await radioFixture.expectChecked(false); + }); + + test('programmatically assigning a value should update the checked radio', async ({ page }) => { + await page.setContent( + ` + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + `, + config + ); + + const radioGroup = page.locator('ion-radio-group'); + const radioOne = page.locator('ion-radio[value="1"]'); + const radioTwo = page.locator('ion-radio[value="2"]'); + + await radioGroup.evaluate((el: HTMLIonRadioGroupElement) => (el.value = '2')); + + await page.waitForChanges(); + + await expect(radioOne).not.toHaveClass(/radio-checked/); + await expect(radioTwo).toHaveClass(/radio-checked/); + }); + }); +}); + +class RadioFixture { + readonly page: E2EPage; + + private radio!: Locator; + + constructor(page: E2EPage) { + this.page = page; + } + + async checkRadio(method: 'keyboard' | 'mouse', selector = 'ion-radio') { + const { page } = this; + const radio = (this.radio = page.locator(selector)); + + if (method === 'keyboard') { + await radio.focus(); + await page.keyboard.press('Space'); + } else { + await radio.click(); + } + + await page.waitForChanges(); + + return radio; + } + + async expectChecked(state: boolean) { + const { radio } = this; + await expect(radio.locator('input')).toHaveJSProperty('checked', state); + } +} diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Safari-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/radio-group/test/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Safari-linux.png rename to core/src/components/radio-group/test/legacy/basic/radio-group.e2e.ts-snapshots/radio-group-diff-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/radio-group/test/legacy/form/index.html b/core/src/components/radio-group/test/legacy/form/index.html new file mode 100644 index 0000000000..159f8c6249 --- /dev/null +++ b/core/src/components/radio-group/test/legacy/form/index.html @@ -0,0 +1,114 @@ + + + + + Radio Group - Form + + + + + + + + + + + + + Radio Group - Form + + + + +
+ + + + Luckiest Man On Earth + + + + Biff + + + + + + + Griff + + + + + + + Buford + + + + + + + George + + + + + Submit + + + +
+ +

+ Value: + +

+ +

+ Changes: + 0 +

+ + + + + + + diff --git a/core/src/components/radio-group/test/legacy/form/radio-group.e2e.ts b/core/src/components/radio-group/test/legacy/form/radio-group.e2e.ts new file mode 100644 index 0000000000..72e3811d1c --- /dev/null +++ b/core/src/components/radio-group/test/legacy/form/radio-group.e2e.ts @@ -0,0 +1,35 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('radio-group: form'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/radio-group/test/legacy/form', config); + }); + + test('selecting an option should update the value', async ({ page }) => { + const radioGroup = page.locator('ion-radio-group'); + const ionChange = await page.spyOnEvent('ionChange'); + const griffRadio = page.locator('ion-radio[value="griff"]'); + await expect(radioGroup).toHaveAttribute('value', 'biff'); + + await griffRadio.click(); + await page.waitForChanges(); + + await expect(ionChange).toHaveReceivedEventDetail({ value: 'griff', event: { isTrusted: true } }); + }); + + test('selecting a disabled option should not update the value', async ({ page }) => { + const value = page.locator('#value'); + const disabledRadio = page.locator('ion-radio[value="george"]'); + + await expect(value).toHaveText(''); + await expect(disabledRadio).toHaveAttribute('disabled', ''); + + await disabledRadio.click({ force: true }); + await page.waitForChanges(); + + await expect(value).toHaveText(''); + }); + }); +}); diff --git a/core/src/components/radio-group/test/legacy/search/index.html b/core/src/components/radio-group/test/legacy/search/index.html new file mode 100644 index 0000000000..fb0bb926f3 --- /dev/null +++ b/core/src/components/radio-group/test/legacy/search/index.html @@ -0,0 +1,82 @@ + + + + + Radio Group - Search + + + + + + + + + + + + + Radio Group - Form + + + + + + Current value: + + + + + + + + + + + + diff --git a/core/src/components/radio-group/test/legacy/search/radio-group.e2e.ts b/core/src/components/radio-group/test/legacy/search/radio-group.e2e.ts new file mode 100644 index 0000000000..ec40c75605 --- /dev/null +++ b/core/src/components/radio-group/test/legacy/search/radio-group.e2e.ts @@ -0,0 +1,42 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not var across modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('radio-group'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/radio-group/test/legacy/search', config); + }); + + test.describe('radio-group: state', () => { + test('radio should remain checked after being removed/readded to the dom', async ({ page }) => { + const radioGroup = page.locator('ion-radio-group'); + const radio = page.locator('ion-radio[value=two]'); + const searchbarInput = page.locator('ion-searchbar input'); + + // select radio + await radio.click(); + await expect(radio.locator('input')).toHaveJSProperty('checked', true); + + // filter radio so it is not in DOM + await page.fill('ion-searchbar input', 'zero'); + await searchbarInput.evaluate((el) => el.blur()); + await page.waitForChanges(); + await expect(radio).toBeHidden(); + + // ensure radio group has the same value + await expect(radioGroup).toHaveJSProperty('value', 'two'); + + // clear the search so the radio appears + await page.fill('ion-searchbar input', ''); + await searchbarInput.evaluate((el) => el.blur()); + await page.waitForChanges(); + + // ensure that the new radio instance is still checked + await expect(radio.locator('input')).toHaveJSProperty('checked', true); + }); + }); + }); +}); diff --git a/core/src/components/radio-group/test/search/index.html b/core/src/components/radio-group/test/search/index.html index fb0bb926f3..825ac1c81c 100644 --- a/core/src/components/radio-group/test/search/index.html +++ b/core/src/components/radio-group/test/search/index.html @@ -65,8 +65,7 @@ if (d.value.includes(query)) { html += ` - Item ${d.value} - + Item ${d.value} `; } diff --git a/core/src/components/radio-group/test/search/radio-group.e2e.ts b/core/src/components/radio-group/test/search/radio-group.e2e.ts index ef9ac5828d..121acd4cd6 100644 --- a/core/src/components/radio-group/test/search/radio-group.e2e.ts +++ b/core/src/components/radio-group/test/search/radio-group.e2e.ts @@ -1,42 +1,41 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +import { RadioFixture } from '../fixtures'; + /** * This behavior does not var across modes/directions. */ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('radio-group'), () => { - test.beforeEach(async ({ page }) => { + test.describe(title('radio-group: search'), () => { + test('radio should remain checked after being removed/readded to the dom', async ({ page }) => { await page.goto('/src/components/radio-group/test/search', config); - }); - test.describe('radio-group: state', () => { - test('radio should remain checked after being removed/readded to the dom', async ({ page }) => { - const radioGroup = page.locator('ion-radio-group'); - const radio = page.locator('ion-radio[value=two]'); - const searchbarInput = page.locator('ion-searchbar input'); + const radioFixture = new RadioFixture(page); - // select radio - await radio.click(); - await expect(radio.locator('input')).toHaveJSProperty('checked', true); + const radioGroup = page.locator('ion-radio-group'); + const searchbarInput = page.locator('ion-searchbar input'); - // filter radio so it is not in DOM - await page.fill('ion-searchbar input', 'zero'); - await searchbarInput.evaluate((el) => el.blur()); - await page.waitForChanges(); - await expect(radio).toBeHidden(); + // select radio + const radio = await radioFixture.checkRadio('mouse', 'ion-radio[value=two]'); + await radioFixture.expectChecked(true); - // ensure radio group has the same value - await expect(radioGroup).toHaveJSProperty('value', 'two'); + // filter radio so it is not in DOM + await page.fill('ion-searchbar input', 'zero'); + await searchbarInput.evaluate((el) => el.blur()); + await page.waitForChanges(); + await expect(radio).toBeHidden(); - // clear the search so the radio appears - await page.fill('ion-searchbar input', ''); - await searchbarInput.evaluate((el) => el.blur()); - await page.waitForChanges(); + // ensure radio group has the same value + await expect(radioGroup).toHaveJSProperty('value', 'two'); - // ensure that the new radio instance is still checked - await expect(radio.locator('input')).toHaveJSProperty('checked', true); - }); + // clear the search so the radio appears + await page.fill('ion-searchbar input', ''); + await searchbarInput.evaluate((el) => el.blur()); + await page.waitForChanges(); + + // ensure that the new radio instance is still checked + await radioFixture.expectChecked(true); }); }); }); diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index 14ae1f4d68..d6618dcffe 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -2,8 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core'; import type { LegacyFormController } from '@utils/forms'; import { createLegacyFormController } from '@utils/forms'; -import type { Attributes } from '@utils/helpers'; -import { addEventListener, getAriaLabel, inheritAriaAttributes, removeEventListener } from '@utils/helpers'; +import { addEventListener, getAriaLabel, removeEventListener } from '@utils/helpers'; import { printIonWarning } from '@utils/logging'; import { createColorClasses, hostContext } from '@utils/theme'; @@ -31,7 +30,6 @@ export class Radio implements ComponentInterface { private radioGroup: HTMLIonRadioGroupElement | null = null; private nativeInput!: HTMLInputElement; private legacyFormController!: LegacyFormController; - private inheritedAttributes: Attributes = {}; // This flag ensures we log the deprecation warning at most once. private hasLoggedDeprecationWarning = false; @@ -135,8 +133,7 @@ export class Radio implements ComponentInterface { ev.stopPropagation(); ev.preventDefault(); - const element = this.legacyFormController.hasLegacyControl() ? this.el : this.nativeInput; - element.focus(); + this.el.focus(); } /** @internal */ @@ -167,12 +164,6 @@ export class Radio implements ComponentInterface { componentWillLoad() { this.emitStyle(); - - if (!this.legacyFormController.hasLegacyControl()) { - this.inheritedAttributes = { - ...inheritAriaAttributes(this.el), - }; - } } @Watch('checked') @@ -201,7 +192,34 @@ export class Radio implements ComponentInterface { }; private onClick = () => { - this.checked = this.nativeInput.checked; + const { radioGroup, checked } = this; + + /** + * The legacy control uses a native input inside + * of the radio host, so we can set this.checked + * to the state of the nativeInput. RadioGroup + * will prevent the native input from checking if + * allowEmptySelection="false" by calling ev.preventDefault(). + */ + if (this.legacyFormController.hasLegacyControl()) { + this.checked = this.nativeInput.checked; + return; + } + + /** + * The modern control does not use a native input + * inside of the radio host, so we cannot rely on the + * ev.preventDefault() behavior above. If the radio + * is checked and the parent radio group allows for empty + * selection, then we can set the checked state to false. + * Otherwise, the checked state should always be set + * to true because the checked state cannot be toggled. + */ + if (checked && radioGroup?.allowEmptySelection) { + this.checked = false; + } else { + this.checked = true; + } }; private onFocus = () => { @@ -232,23 +250,14 @@ export class Radio implements ComponentInterface { } private renderRadio() { - const { - checked, - disabled, - inputId, - color, - el, - justify, - labelPlacement, - inheritedAttributes, - hasLabel, - buttonTabindex, - } = this; + const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex } = this; const mode = getIonMode(this); const inItem = hostContext('ion-item', el); return (