fix(react): clean-up ionic lifecycle hooks

CHANGELOG.md

@@ -3,33 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
-
-
-### Bug Fixes
-
-* **react:** Nav unmounts component while invoking popTo or popToRoot ([#27821](https://github.com/ionic-team/ionic-framework/issues/27821)) ([0edcb2c](https://github.com/ionic-team/ionic-framework/commit/0edcb2cd85133ae8c304c53c37ca829e5fbad447)), closes [#27798](https://github.com/ionic-team/ionic-framework/issues/27798)
-* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
-
-
-
-
-
-## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
-
-
-### Bug Fixes
-
-* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
-* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
-* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
-* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
-* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
-
-
-
-
-
 # [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
 
 

core/CHANGELOG.md

@@ -3,32 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.4.2](https://github.com/ionic-team/ionic-framework/compare/v7.4.1...v7.4.2) (2023-09-27)
-
-
-### Bug Fixes
-
-* **title:** large title uses custom font on transition ([#28231](https://github.com/ionic-team/ionic-framework/issues/28231)) ([71a7af0](https://github.com/ionic-team/ionic-framework/commit/71a7af0f52fe62937b1dea1ca2739e78801a2a6d))
-
-
-
-
-
-## [7.4.1](https://github.com/ionic-team/ionic-framework/compare/v7.4.0...v7.4.1) (2023-09-20)
-
-
-### Bug Fixes
-
-* **overlays:** correctly re-add root to accessibility tree ([#28183](https://github.com/ionic-team/ionic-framework/issues/28183)) ([81714d4](https://github.com/ionic-team/ionic-framework/commit/81714d45bd97f0ba91729959b60a0dc1d1d06533)), closes [#28180](https://github.com/ionic-team/ionic-framework/issues/28180)
-* **radio,toggle,checkbox,select:** padded space is clickable in items ([#28136](https://github.com/ionic-team/ionic-framework/issues/28136)) ([5b7e422](https://github.com/ionic-team/ionic-framework/commit/5b7e422dc0bfd4d58fb31f62715af47e62dabb57)), closes [#27169](https://github.com/ionic-team/ionic-framework/issues/27169)
-* **range:** knob is not cut off in item with modern syntax ([#28199](https://github.com/ionic-team/ionic-framework/issues/28199)) ([0104d89](https://github.com/ionic-team/ionic-framework/commit/0104d899270d73e16f2850a5fd7d2ba25a9e7ef0)), closes [#27199](https://github.com/ionic-team/ionic-framework/issues/27199)
-* **scroll-assist:** improve input scroll accuracy with native resizing ([#28169](https://github.com/ionic-team/ionic-framework/issues/28169)) ([b5c736f](https://github.com/ionic-team/ionic-framework/commit/b5c736f5ac829efebedf3256ddf77ab3daa7a5f6)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
-* **scroll-assist:** re-run when keyboard changes ([#28174](https://github.com/ionic-team/ionic-framework/issues/28174)) ([3f06da4](https://github.com/ionic-team/ionic-framework/commit/3f06da4cfc0d59c658e17e09ccb1ea28a29339f9)), closes [#22940](https://github.com/ionic-team/ionic-framework/issues/22940)
-
-
-
-
-
 # [7.4.0](https://github.com/ionic-team/ionic-framework/compare/v7.3.4...v7.4.0) (2023-09-14)
 
 

core/package-lock.json

@@ -1,28 +1,28 @@
 {
   "name": "@ionic/core",
-  "version": "7.4.2",
+  "version": "7.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.4.2",
+      "version": "7.4.0",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.3.0",
+        "@stencil/core": "^4.2.1",
         "ionicons": "7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.7.3",
-        "@capacitor/core": "^5.4.1",
+        "@capacitor/core": "^5.4.0",
         "@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.38.1",
+        "@playwright/test": "^1.38.0",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.8.2",
@@ -607,9 +607,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
-      "integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.0.tgz",
+      "integrity": "sha512-lBWMbhPtvtcPoICdvqOaTsS9GDFlw1QHgkHZ5rxQF4Nvahikllvcud1fEu4ta28pykMUSlpCX2iDXYustYaATg==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -1541,12 +1541,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
-      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.0.tgz",
+      "integrity": "sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.38.1"
+        "playwright": "1.38.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1630,9 +1630,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
-      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
+      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8190,12 +8190,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
-      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.0.tgz",
+      "integrity": "sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.38.1"
+        "playwright-core": "1.38.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -8208,9 +8208,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
-      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.0.tgz",
+      "integrity": "sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -10802,9 +10802,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
-      "integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.0.tgz",
+      "integrity": "sha512-lBWMbhPtvtcPoICdvqOaTsS9GDFlw1QHgkHZ5rxQF4Nvahikllvcud1fEu4ta28pykMUSlpCX2iDXYustYaATg==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11469,12 +11469,12 @@
       }
     },
     "@playwright/test": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
-      "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.0.tgz",
+      "integrity": "sha512-xis/RXXsLxwThKnlIXouxmIvvT3zvQj1JE39GsNieMUrMpb3/GySHDh2j8itCG22qKVD4MYLBp7xB73cUW/UUw==",
       "dev": true,
       "requires": {
-        "playwright": "1.38.1"
+        "playwright": "1.38.0"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11536,9 +11536,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
-      "integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.2.1.tgz",
+      "integrity": "sha512-alYwqVwxfD0n6HKRVJqJoTzQNnf44n/sddvjNu3JMEn3sfY/Ag7rpmwUntYjtJmRut+or+9gPPgIJviCuKi4yQ=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -16344,19 +16344,19 @@
       }
     },
     "playwright": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
-      "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.0.tgz",
+      "integrity": "sha512-fJGw+HO0YY+fU/F1N57DMO+TmXHTrmr905J05zwAQE9xkuwP/QLDk63rVhmyxh03dYnEhnRbsdbH9B0UVVRB3A==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.38.1"
+        "playwright-core": "1.38.0"
       }
     },
     "playwright-core": {
-      "version": "1.38.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
-      "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
+      "version": "1.38.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.0.tgz",
+      "integrity": "sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.4.2",
+  "version": "7.4.0",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,20 +31,20 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.3.0",
+    "@stencil/core": "^4.2.1",
     "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.4.1",
+    "@capacitor/core": "^5.4.0",
     "@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.38.1",
+    "@playwright/test": "^1.38.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.2",

core/playwright.config.ts

@@ -60,8 +60,7 @@ const config: PlaywrightTestConfig = {
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   maxFailures: 0,
-  /* Test retries help catch flaky tests on CI */
-  retries: process.env.CI ? 2 : 0,
+  retries: 2,
   reportSlowTests: null,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,

core/src/components.d.ts

@@ -1336,7 +1336,6 @@ export namespace Components {
         "download": string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
-          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -5408,7 +5407,6 @@ declare namespace LocalJSX {
         "download"?: string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
-          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**

core/src/components/checkbox/checkbox.tsx

@@ -140,8 +140,9 @@ export class Checkbox implements ComponentInterface {
    */
   @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
+  // TODO(FW-3100): remove this
   connectedCallback() {
-    this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
+    this.legacyFormController = createLegacyFormController(this.el);
   }
 
   componentWillLoad() {
@@ -194,7 +195,7 @@ export class Checkbox implements ComponentInterface {
     });
   };
 
-  private toggleChecked = (ev: Event) => {
+  private toggleChecked = (ev: any) => {
     ev.preventDefault();
 
     this.setFocus();
@@ -210,10 +211,6 @@ export class Checkbox implements ComponentInterface {
     this.ionBlur.emit();
   };
 
-  private onClick = (ev: MouseEvent) => {
-    this.toggleChecked(ev);
-  };
-
   // TODO(FW-3100): run contents of renderCheckbox directly instead
   render() {
     const { legacyFormController } = this;
@@ -255,7 +252,6 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
         })}
-        onClick={this.onClick}
       >
         <label class="checkbox-wrapper">
           {/*
@@ -337,7 +333,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
           'legacy-checkbox': true,
           interactive: true,
         })}
-        onClick={this.onClick}
       >
         <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
           {path}

core/src/components/checkbox/test/basic/checkbox.e2e.ts

@@ -83,28 +83,5 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
       expect(ionChange).not.toHaveReceivedEvent();
     });
-
-    test('clicking padded space within item should click the checkbox', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-item>
-          <ion-checkbox>Size</ion-checkbox>
-        </ion-item>
-      `,
-        config
-      );
-      const itemNative = page.locator('.item-native');
-      const ionChange = await page.spyOnEvent('ionChange');
-
-      // Clicks the padded space within the item
-      await itemNative.click({
-        position: {
-          x: 5,
-          y: 5,
-        },
-      });
-
-      expect(ionChange).toHaveReceivedEvent();
-    });
   });
 });

core/src/components/checkbox/test/legacy/basic/checkbox.e2e.ts

@@ -67,28 +67,5 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
       await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
       await expect(ionChange).not.toHaveReceivedEvent();
     });
-
-    test('clicking padded space within item should click the checkbox', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-item>
-          <ion-checkbox legacy="true" value="my-checkbox"></ion-checkbox>
-        </ion-item>
-      `,
-        config
-      );
-      const itemNative = page.locator('.item-native');
-      const ionChange = await page.spyOnEvent('ionChange');
-
-      // Clicks the padded space within the item
-      await itemNative.click({
-        position: {
-          x: 5,
-          y: 5,
-        },
-      });
-
-      expect(ionChange).toHaveReceivedEvent();
-    });
   });
 });

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

@@ -1,53 +1,18 @@
 import { expect } from '@playwright/test';
 import { configs, dragElementBy, test } from '@utils/test/playwright';
 
+import { testSlidingItem } from '../test.utils';
+
 /**
- * item-sliding doesn't have mode-specific styling,
- * but the child components, item-options and item-option, do.
- *
- * It is important to test all modes to ensure that the
- * child components are being rendered correctly.
+ * item-sliding doesn't have mode-specific styling
  */
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item-sliding: basic'), () => {
-    test.beforeEach(async ({ page }) => {
+    test.fixme('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/basic`, config);
-    });
-    test.describe('start options', () => {
-      test('should not have visual regressions', async ({ page }) => {
-        const item = page.locator('#item2');
 
-        /**
-         * Negative dragByX value to drag element from the right to the left
-         * to reveal the options on the right side.
-         * Positive dragByX value to drag element from the left to the right
-         * to reveal the options on the left side.
-         */
-        const dragByX = config.direction === 'rtl' ? -150 : 150;
-
-        await dragElementBy(item, page, dragByX);
-        await page.waitForChanges();
-
-        await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
-      });
-    });
-
-    test.describe('end options', () => {
-      test('should not have visual regressions', async ({ page }) => {
-        const item = page.locator('#item2');
-
-        /**
-         * Negative dragByX value to drag element from the right to the left
-         * to reveal the options on the right side.
-         * Positive dragByX value to drag element from the left to the right
-         * to reveal the options on the left side.
-         */
-        const dragByX = config.direction === 'rtl' ? 150 : -150;
-
-        await dragElementBy(item, page, dragByX);
-
-        await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
-      });
+      await testSlidingItem(page, 'item2', 'start', screenshot, true);
+      await testSlidingItem(page, 'item2', 'end', screenshot);
     });
   });
 });

core/src/components/item-sliding/test/icons/item-sliding.e2e.ts

@@ -1,36 +1,19 @@
-import { expect } from '@playwright/test';
-import { configs, test, dragElementBy } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 
+import { testSlidingItem } from '../test.utils';
+
+// TODO FW-3006
 /**
- * item-sliding doesn't have mode-specific styling,
- * but the child components, item-options and item-option, do.
- *
- * It is important to test all modes to ensure that the
- * child components are being rendered correctly.
+ * item-sliding doesn't have mode-specific styling
  */
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('item-sliding: icons'), () => {
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe.skip(title('item-sliding: icons'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item-sliding/test/icons`, config);
 
       const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
       for (const itemID of itemIDs) {
-        const item = page.locator(`#${itemID}`);
-
-        /**
-         * Negative dragByX value to drag element from the right to the left
-         * to reveal the options on the right side.
-         * Positive dragByX value to drag element from the left to the right
-         * to reveal the options on the left side.
-         */
-        const dragByX = config.direction === 'rtl' ? 150 : -150;
-
-        await dragElementBy(item, page, dragByX);
-        await page.waitForChanges();
-
-        // Convert camelCase ids to kebab-case for screenshot file names
-        const itemIDKebab = itemID.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemIDKebab}`));
+        await testSlidingItem(page, itemID, itemID, screenshot);
       }
     });
   });

core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts

@@ -1,11 +1,12 @@
 import { expect } from '@playwright/test';
-import { configs, test, dragElementBy } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
 /**
  * This behavior does not vary across modes/directions
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('item-sliding: scroll-target'), () => {
-    test('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => {
+    // TODO FW-3006
+    test.skip('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => {
       skip.browser('webkit', 'mouse.wheel is not available in WebKit');
 
       await page.goto(`/src/components/item-sliding/test/scroll-target`, config);
@@ -15,7 +16,13 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
 
-      await dragElementBy(itemSlidingEl, page, -150, 0, undefined, undefined, false);
+      const box = (await itemSlidingEl.boundingBox())!;
+      const centerX = box.x + box.width / 2;
+      const centerY = box.y + box.height / 2;
+
+      await page.mouse.move(centerX, centerY);
+      await page.mouse.down();
+      await page.mouse.move(centerX - 30, centerY);
 
       /**
        * Do not use scrollToBottom() or other scrolling methods

core/src/components/item-sliding/test/test.utils.ts

@@ -1,11 +1,6 @@
 import { expect } from '@playwright/test';
 import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
 
-/**
- * Warning: This function will fail when in RTL mode.
- * TODO(FW-3711): Remove the `directions` config when this issue preventing
- * tests from passing in RTL mode is resolved.
- */
 export const testSlidingItem = async (
   page: E2EPage,
   itemID: string,
@@ -28,9 +23,6 @@ export const testSlidingItem = async (
   }
 
   // opening animation takes longer than waitForChanges accounts for
-  // especially if another item sliding is already open,
-  // so we wait to ensure the opened item is closed before
-  // opening another
   await page.waitForTimeout(500);
 
   await expect(item).toHaveScreenshot(screenshot(`item-sliding-${screenshotNameSuffix}`));

core/src/components/item/item.scss

@@ -173,13 +173,6 @@
   }
 }
 
-// Item: Interactive
-// --------------------------------------------------
-
-:host(.item-has-interactive-control) {
-  cursor: pointer;
-}
-
 
 // Item: Disabled
 // --------------------------------------------------
@@ -196,7 +189,6 @@
 }
 
 
-
 // Native Item
 // --------------------------------------------------
 

core/src/components/item/item.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { inheritAttributes, raf } from '@utils/helpers';
@@ -85,7 +85,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   /**
    * The fill for the item. If `"solid"` the item will have a background. If
    * `"outline"` the item will be transparent with a border. Only available in `md` mode.
-   * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
    */
   @Prop() fill?: 'outline' | 'solid';
 
@@ -351,22 +350,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     }
   }
 
-  private getFirstInteractive() {
-    if (Build.isTesting) {
-      /**
-       * Pseudo selectors can't be tested in unit tests.
-       * It will cause an error when running the tests.
-       *
-       * TODO: FW-5205 - Remove the build conditional when this is fixed in Stencil
-       */
-      return undefined;
-    }
-    const controls = this.el.querySelectorAll<HTMLElement>(
-      'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])'
-    );
-    return controls[0];
-  }
-
   render() {
     const {
       counterString,
@@ -384,7 +367,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
       routerAnimation,
       routerDirection,
       inheritedAriaAttributes,
-      multipleInputs,
     } = this;
     const childStyles = {} as StyleEventDetail;
     const mode = getIonMode(this);
@@ -401,41 +383,15 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             rel,
             target,
           };
-
-    let clickFn = {};
-
-    const firstInteractive = this.getFirstInteractive();
-
     // Only set onClick if the item is clickable to prevent screen
     // readers from reading all items as clickable
-    if (clickable || (firstInteractive !== undefined && !multipleInputs)) {
-      clickFn = {
-        onClick: (ev: MouseEvent) => {
-          if (clickable) {
+    const clickFn = clickable
+      ? {
+          onClick: (ev: Event) => {
             openURL(href, ev, routerDirection, routerAnimation);
-          }
-          if (firstInteractive !== undefined && !multipleInputs) {
-            const path = ev.composedPath();
-            const target = path[0] as HTMLElement;
-            if (ev.isTrusted) {
-              /**
-               * Dispatches a click event to the first interactive element,
-               * when it is the result of a user clicking on the item.
-               *
-               * We check if the click target is in the shadow root,
-               * which means the user clicked on the .item-native or
-               * .item-inner padding.
-               */
-              const clickedWithinShadowRoot = this.el.shadowRoot!.contains(target);
-              if (clickedWithinShadowRoot) {
-                firstInteractive.click();
-              }
-            }
-          }
-        },
-      };
-    }
-
+          },
+        }
+      : {};
     const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
     this.itemStyles.forEach((value) => {
       Object.assign(childStyles, value);
@@ -457,7 +413,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             [`item-lines-${lines}`]: lines !== undefined,
             [`item-fill-${fillValue}`]: true,
             [`item-shape-${shape}`]: shape !== undefined,
-            'item-has-interactive-control': firstInteractive !== undefined,
             'item-disabled': disabled,
             'in-list': inList,
             'item-multiple-inputs': this.multipleInputs,