fix

.github/workflows/label.yml

@@ -11,13 +11,9 @@ on:
 
 jobs:
   triage:
-    permissions:
-      contents: read
-      pull-requests: write
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/labeler@v4
+    - uses: actions/labeler@main
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         sync-labels: true

core/src/components.d.ts

@@ -1162,7 +1162,7 @@ export namespace Components {
          */
         "autocorrect": 'on' | 'off';
         /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
         "autofocus": boolean;
         /**
@@ -1274,7 +1274,7 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -2601,7 +2601,7 @@ export namespace Components {
          */
         "searchIcon"?: string;
         /**
-          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -2950,7 +2950,7 @@ export namespace Components {
          */
         "autocapitalize": string;
         /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
         "autofocus": boolean;
         /**
@@ -3050,7 +3050,7 @@ export namespace Components {
          */
         "rows"?: number;
         /**
-          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -5854,7 +5854,7 @@ declare namespace LocalJSX {
          */
         "autocorrect"?: 'on' | 'off';
         /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
         "autofocus"?: boolean;
         /**
@@ -7699,7 +7699,7 @@ declare namespace LocalJSX {
          */
         "autocapitalize"?: string;
         /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
         "autofocus"?: boolean;
         /**

core/src/components/input/input.tsx

@@ -95,9 +95,7 @@ export class Input implements ComponentInterface {
   @Prop() autocorrect: 'on' | 'off' = 'off';
 
   /**
-   * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
-   *
-   * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
    */
   @Prop() autofocus = false;
 
@@ -426,8 +424,6 @@ export class Input implements ComponentInterface {
    *
    * Developers who wish to focus an input when an overlay is presented
    * should call `setFocus` after `didPresent` has resolved.
-   *
-   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {

core/src/components/searchbar/searchbar.tsx

@@ -257,8 +257,6 @@ export class Searchbar implements ComponentInterface {
    *
    * Developers who wish to focus an input when an overlay is presented
    * should call `setFocus` after `didPresent` has resolved.
-   *
-   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {

core/src/components/textarea/textarea.tsx

@@ -93,9 +93,7 @@ export class Textarea implements ComponentInterface {
   @Prop() autocapitalize = 'none';
 
   /**
-   * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
-   *
-   * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
    */
   @Prop() autofocus = false;
 
@@ -374,8 +372,6 @@ export class Textarea implements ComponentInterface {
   /**
    * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
    * `textarea.focus()`.
-   *
-   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {

packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx

@@ -1,8 +1,7 @@
 import type { RouteInfo, ViewItem } from '@ionic/react';
 import { IonRoute, ViewLifeCycleManager, ViewStacks, generateId } from '@ionic/react';
 import React from 'react';
-
-import { matchPath } from './utils/matchPath';
+import { matchPath } from 'react-router';
 
 export class ReactRouterViewStack extends ViewStacks {
   constructor() {
@@ -24,16 +23,21 @@ export class ReactRouterViewStack extends ViewStacks {
       ionRoute: false,
     };
 
+    const matchProps = {
+      exact: reactElement.props.exact,
+      path: reactElement.props.path || reactElement.props.from,
+      component: reactElement.props.component,
+    };
+
+    const match = matchPath(routeInfo.pathname, matchProps);
+
     if (reactElement.type === IonRoute) {
       viewItem.ionRoute = true;
       viewItem.disableIonPageManagement = reactElement.props.disableIonPageManagement;
     }
 
     viewItem.routeData = {
-      match: matchPath({
-        pathname: routeInfo.pathname,
-        componentProps: reactElement.props,
-      }),
+      match,
       childProps: reactElement.props,
     };
 
@@ -102,7 +106,7 @@ export class ReactRouterViewStack extends ViewStacks {
   }
 
   findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, mustBeIonRoute = true) {
-    const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, mustBeIonRoute);
+    const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, false, mustBeIonRoute);
     return viewItem;
   }
 
@@ -111,10 +115,7 @@ export class ReactRouterViewStack extends ViewStacks {
     return viewItem;
   }
 
-  /**
-   * Returns the matching view item and the match result for a given pathname.
-   */
-  private findViewItemByPath(pathname: string, outletId?: string, mustBeIonRoute?: boolean) {
+  private findViewItemByPath(pathname: string, outletId?: string, forceExact?: boolean, mustBeIonRoute?: boolean) {
     let viewItem: ViewItem | undefined;
     let match: ReturnType<typeof matchPath> | undefined;
     let viewStack: ViewItem[];
@@ -139,24 +140,16 @@ export class ReactRouterViewStack extends ViewStacks {
       if (mustBeIonRoute && !v.ionRoute) {
         return false;
       }
-
-      match = matchPath({
-        pathname,
-        componentProps: v.routeData.childProps,
-      });
-
-      if (match) {
-        /**
-         * Even though we have a match from react-router, we do not know if the match
-         * is for this specific view item.
-         *
-         * To validate this, we need to check if the path and url match the view item's route data.
-         */
-        const hasParameter = match.path.includes(':');
-        if (!hasParameter || (hasParameter && match.url === v.routeData?.match?.url)) {
-          viewItem = v;
-          return true;
-        }
+      const matchProps = {
+        exact: forceExact ? true : v.routeData.childProps.exact,
+        path: v.routeData.childProps.path || v.routeData.childProps.from,
+        component: v.routeData.childProps.component,
+      };
+      const myMatch = matchPath(pathname, matchProps);
+      if (myMatch) {
+        viewItem = v;
+        match = myMatch;
+        return true;
       }
       return false;
     }
@@ -178,9 +171,13 @@ export class ReactRouterViewStack extends ViewStacks {
   }
 }
 
-function matchComponent(node: React.ReactElement, pathname: string) {
-  return matchPath({
-    pathname,
-    componentProps: node.props,
-  });
+function matchComponent(node: React.ReactElement, pathname: string, forceExact?: boolean) {
+  const matchProps = {
+    exact: forceExact ? true : node.props.exact,
+    path: node.props.path || node.props.from,
+    component: node.props.component,
+  };
+  const match = matchPath(pathname, matchProps);
+
+  return match;
 }

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -1,9 +1,9 @@
 import type { RouteInfo, StackContextState, ViewItem } from '@ionic/react';
 import { RouteManagerContext, StackContext, generateId, getConfig } from '@ionic/react';
 import React from 'react';
+import { matchPath } from 'react-router-dom';
 
 import { clonePageElement } from './clonePageElement';
-import { matchPath } from './utils/matchPath';
 
 // TODO(FW-2959): types
 
@@ -433,10 +433,12 @@ export default StackManager;
 function matchRoute(node: React.ReactNode, routeInfo: RouteInfo) {
   let matchedNode: React.ReactNode;
   React.Children.forEach(node as React.ReactElement, (child: React.ReactElement) => {
-    const match = matchPath({
-      pathname: routeInfo.pathname,
-      componentProps: child.props,
-    });
+    const matchProps = {
+      exact: child.props.exact,
+      path: child.props.path || child.props.from,
+      component: child.props.component,
+    };
+    const match = matchPath(routeInfo.pathname, matchProps);
     if (match) {
       matchedNode = child;
     }
@@ -457,11 +459,12 @@ function matchRoute(node: React.ReactNode, routeInfo: RouteInfo) {
 }
 
 function matchComponent(node: React.ReactElement, pathname: string, forceExact?: boolean) {
-  return matchPath({
-    pathname,
-    componentProps: {
-      ...node.props,
-      exact: forceExact,
-    },
-  });
+  const matchProps = {
+    exact: forceExact ? true : node.props.exact,
+    path: node.props.path || node.props.from,
+    component: node.props.component,
+  };
+  const match = matchPath(pathname, matchProps);
+
+  return match;
 }

packages/react-router/src/ReactRouter/utils/matchPath.ts

@@ -1,47 +0,0 @@
-import { matchPath as reactRouterMatchPath } from 'react-router';
-
-interface MatchPathOptions {
-  /**
-   * The pathname to match against.
-   */
-  pathname: string;
-  /**
-   * The props to match against, they are identical to the matching props `Route` accepts.
-   */
-  componentProps: {
-    path?: string;
-    from?: string;
-    component?: any;
-    exact?: boolean;
-  };
-}
-
-/**
- * @see https://v5.reactrouter.com/web/api/matchPath
- */
-export const matchPath = ({
-  pathname,
-  componentProps,
-}: MatchPathOptions): false | ReturnType<typeof reactRouterMatchPath> => {
-  const { exact, component } = componentProps;
-
-  const path = componentProps.path || componentProps.from;
-  /***
-   * The props to match against, they are identical
-   * to the matching props `Route` accepts. It could also be a string
-   * or an array of strings as shortcut for `{ path }`.
-   */
-  const matchProps = {
-    exact,
-    path,
-    component,
-  };
-
-  const match = reactRouterMatchPath(pathname, matchProps);
-
-  if (!match) {
-    return false;
-  }
-
-  return match;
-};

packages/react-router/test/base/src/pages/routing/Details.tsx

@@ -24,6 +24,10 @@ const Details: React.FC<DetailsProps> = () => {
     return () => console.log('Home Details unmount');
   }, []);
 
+  // useIonViewWillEnter(() => {
+  //   console.log('IVWE Details')
+  // })
+
   const nextId = parseInt(id, 10) + 1;
 
   return (
@@ -54,9 +58,6 @@ const Details: React.FC<DetailsProps> = () => {
         <IonButton routerLink={`/routing/tabs/settings/details/1`}>
           <IonLabel>Go to Settings Details 1</IonLabel>
         </IonButton>
-        <br />
-        <br />
-        <input data-testid="details-input" />
       </IonContent>
     </IonPage>
   );

packages/react-router/test/base/tests/e2e/specs/routing.cy.js

@@ -309,41 +309,6 @@ describe('Routing Tests', () => {
     cy.ionPageDoesNotExist('home-details-page-1');
     cy.ionPageVisible('home-page');
   });
-
-  it('should mount new view item instances of parameterized routes', () => {
-    cy.visit(`http://localhost:${port}/routing/tabs/home/details/1`);
-
-    cy.get('div.ion-page[data-pageid=home-details-page-1]')
-      .get('[data-testid="details-input"]')
-      .should('have.value', '');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-1] [data-testid="details-input"]').type('1');
-
-    cy.ionNav('ion-button', 'Go to Details 2');
-    cy.ionPageVisible('home-details-page-2');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-2] [data-testid="details-input"]').should('have.value', '');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-2] [data-testid="details-input"]').type('2');
-
-    cy.ionNav('ion-button', 'Go to Details 3');
-    cy.ionPageVisible('home-details-page-3');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-3] [data-testid="details-input"]').should('have.value', '');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-3] [data-testid="details-input"]').type('3');
-
-    cy.ionBackClick('home-details-page-3');
-    cy.ionPageVisible('home-details-page-2');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-2] [data-testid="details-input"]').should('have.value', '2');
-
-    cy.ionBackClick('home-details-page-2');
-    cy.ionPageVisible('home-details-page-1');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-1] [data-testid="details-input"]').should('have.value', '1');
-  });
-
   /*
     Tests to add:
     Test that lifecycle events fire

packages/vue/src/components/IonNav.ts

@@ -36,22 +36,22 @@ IonNav.name = "IonNav";
 IonNav.props = {
   animated: {
     type: Boolean,
-    default: true,
+    default: true
   },
   animation: {
     type: Function,
-    default: undefined,
+    default: undefined
   },
   root: {
     type: [Function, Object, String],
-    default: undefined,
+    default: undefined
   },
   rootParams: {
     type: Object,
-    default: undefined,
+    default: undefined
   },
   swipeGesture: {
     type: Boolean,
-    default: undefined,
-  },
-};
+    default: undefined
+  }
+}

packages/vue/test/base/src/components/Nav.vue

@@ -1,12 +1,16 @@
 <template>
-  <ion-nav :root="NavRoot" :root-params="rootParams"></ion-nav>
+  <ion-nav :root="NavRoot"></ion-nav>
 </template>
 
-<script setup lang="ts">
-import { IonNav } from "@ionic/vue";
-import NavRoot from "@/components/NavRoot.vue";
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { IonNav } from '@ionic/vue';
+import NavRoot from '@/components/NavRoot.vue';
 
-const rootParams = {
-  message: "Hello World!",
-};
+export default defineComponent({
+  components: { IonNav },
+  setup() {
+    return { NavRoot }
+  }
+});
 </script>

packages/vue/test/base/src/components/NavRoot.vue

@@ -8,14 +8,11 @@
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
-    <div id="nav-root-params">Message: {{ message }}</div>
-    <ion-button expand="block" @click="pushPage" id="push-nav-child"
-      >Go to Nav Child</ion-button
-    >
+    <ion-button expand="block" @click="pushPage" id="push-nav-child">Go to Nav Child</ion-button>
   </ion-content>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import {
   IonButtons,
   IonButton,
@@ -23,20 +20,28 @@ import {
   IonHeader,
   IonTitle,
   IonToolbar,
-  modalController,
-} from "@ionic/vue";
-import NavChild from "@/components/NavChild.vue";
+  modalController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import NavChild from '@/components/NavChild.vue';
 
-defineProps<{
-  message: string;
-}>();
-
-function pushPage() {
-  const ionNav = document.querySelector("ion-nav") as any;
-  ionNav.push(NavChild, { title: "Custom Title" });
-}
-
-async function dismiss() {
-  await modalController.dismiss();
-}
+export default defineComponent({
+  components: {
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    pushPage: function() {
+      const ionNav = document.querySelector('ion-nav') as any;
+      ionNav.push(NavChild, { title: 'Custom Title' });
+    },
+    dismiss: async function() {
+      await modalController.dismiss();
+    }
+  }
+})
 </script>

packages/vue/test/base/tests/e2e/specs/navigation.cy.js

@@ -10,10 +10,4 @@ describe('Navigation', () => {
 
     cy.get('#nav-child-content').should('have.text', 'Custom Title');
   });
-
-  it('nav should support kebab-case root-params', () => {
-    cy.get('#open-nav-modal').click();
-
-    cy.get('#nav-root-params').should('have.text', 'Message: Hello World!');
-  });
 });