fix(capacitor): reference todo ticket, fix boolean conversion

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When the `connectedCallback` method is called for a segment-button and
its corresponding segment-content has not been created in that instant,
a console error is thrown and the method returns.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `connectedCallback` will now wait, at most 1 second, for the
corresponding segment-content to be created.
- The new behaviour can be tested in segment-view/basic.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See

https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

core/package-lock.json

@@ -18162,4 +18162,4 @@
       "dev": true
     }
   }
-}
+}

core/src/components/segment-button/segment-button.tsx

@@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers';
+import { addEventListener, removeEventListener, inheritAttributes, getNextSiblingOfType } from '@utils/helpers';
 import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -65,7 +65,41 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     this.updateState();
   }
 
-  connectedCallback() {
+  private waitForSegmentContent(ionSegment: HTMLIonSegmentElement | null, contentId: string): Promise<HTMLElement> {
+    return new Promise((resolve, reject) => {
+      let timeoutId: NodeJS.Timeout | undefined = undefined;
+      let animationFrameId: number;
+
+      const check = () => {
+        if (!ionSegment) {
+          reject(new Error(`Segment not found when looking for Segment Content`));
+          return;
+        }
+
+        const segmentView = getNextSiblingOfType<HTMLIonSegmentViewElement>(ionSegment); // Skip the text nodes
+        const segmentContent = segmentView?.querySelector(
+          `ion-segment-content[id="${contentId}"]`
+        ) as HTMLIonSegmentContentElement | null;
+        if (segmentContent && timeoutId) {
+          clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
+          cancelAnimationFrame(animationFrameId);
+          resolve(segmentContent);
+        } else {
+          animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
+        }
+      };
+
+      check();
+
+      // Set a timeout to reject the promise
+      timeoutId = setTimeout(() => {
+        cancelAnimationFrame(animationFrameId);
+        reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
+      }, 1000);
+    });
+  }
+
+  async connectedCallback() {
     const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
     if (segmentEl) {
       this.updateState();
@@ -76,12 +110,13 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     // Return if there is no contentId defined
     if (!this.contentId) return;
 
-    // Attempt to find the Segment Content by its contentId
-    const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null;
-
-    // If no associated Segment Content exists, log an error and return
-    if (!segmentContent) {
-      console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+    let segmentContent;
+    try {
+      // Attempt to find the Segment Content by its contentId
+      segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
+    } catch (error) {
+      // If no associated Segment Content exists, log an error and return
+      console.error('Segment Button: ', (error as Error).message);
       return;
     }
 

core/src/components/segment-view/test/basic/index.html

@@ -123,6 +123,8 @@
         <button class="expand" onClick="changeSegmentContent()">Change Segment Content</button>
 
         <button class="expand" onClick="clearSegmentValue()">Clear Segment Value</button>
+
+        <button class="expand" onClick="addSegmentButtonAndContent()">Add New Segment Button & Content</button>
       </ion-content>
 
       <ion-footer>
@@ -158,6 +160,34 @@
             segment.value = undefined;
           });
         }
+
+        async function addSegmentButtonAndContent() {
+          const segment = document.querySelector('ion-segment');
+          const segmentView = document.querySelector('ion-segment-view');
+
+          const newButton = document.createElement('ion-segment-button');
+          const newId = `new-${Date.now()}`;
+          newButton.setAttribute('content-id', newId);
+          newButton.setAttribute('value', newId);
+          newButton.innerHTML = '<ion-label>New Button</ion-label>';
+
+          segment.appendChild(newButton);
+
+          setTimeout(() => {
+            // Timeout to test waitForSegmentContent() in segment-button
+            const newContent = document.createElement('ion-segment-content');
+            newContent.setAttribute('id', newId);
+            newContent.innerHTML = 'New Content';
+
+            segmentView.appendChild(newContent);
+
+            // Necessary timeout to ensure the value is set after the content is added.
+            // Otherwise, the transition is unsuccessful and the content is not shown.
+            setTimeout(() => {
+              segment.setAttribute('value', newId);
+            }, 200);
+          }, 200);
+        }
       </script>
     </ion-app>
   </body>

core/src/utils/helpers.ts

@@ -413,3 +413,14 @@ export const shallowEqualStringMap = (
 
   return true;
 };
+
+export const getNextSiblingOfType = <T extends Element>(element: Element): T | null => {
+  let sibling = element.nextSibling;
+  while (sibling) {
+    if (sibling.nodeType === Node.ELEMENT_NODE && (sibling as T) !== null) {
+      return sibling as T;
+    }
+    sibling = sibling.nextSibling;
+  }
+  return null;
+};

core/src/utils/platform.ts

@@ -99,7 +99,8 @@ const isCordova = (win: any): boolean => !!(win['cordova'] || win['phonegap'] ||
 
 const isCapacitorNative = (win: any): boolean => {
   const capacitor = win['Capacitor'];
-  return !!capacitor?.isNative;
+  // TODO(ROU-11693): Remove when we no longer support Capacitor 2, which does not have isNativePlatform
+  return !!(capacitor?.isNative || (capacitor?.isNativePlatform && !!capacitor.isNativePlatform()));
 };
 
 const isElectron = (win: Window): boolean => testUserAgent(win, /electron/i);

core/src/utils/test/platform.utils.ts

@@ -29,7 +29,7 @@ export const PlatformConfiguration = {
   },
   Capacitor: {
     Capacitor: {
-      isNative: true,
+      isNativePlatform: () => true,
     },
   },
   PWA: {

packages/angular-server/package-lock.json

@@ -1031,9 +1031,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
@@ -7189,9 +7189,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -11111,4 +11111,4 @@
       }
     }
   }
-}
+}

packages/angular/package-lock.json

@@ -1398,9 +1398,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
@@ -9821,9 +9821,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -15021,4 +15021,4 @@
       }
     }
   }
-}
+}

packages/docs/package-lock.json

@@ -10,4 +10,4 @@
       "license": "MIT"
     }
   }
-}
+}

packages/react-router/package-lock.json

@@ -238,9 +238,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
@@ -415,12 +415,12 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.4.2.tgz",
-      "integrity": "sha512-IDQy6a6oo9dG4Bu/svg/n8KSusTPY/bgI32FGGglm2nIe0F3hnjjIoS0Ikp0QdA4shqSnjV2Aq5AzGd3i6x5gg==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.4.3.tgz",
+      "integrity": "sha512-AqwmoRCjTDBIgmywE6VnOOacOry21ma6TWMS8Dg8ZGu41rT6edDSmX/lKvAAV+jg4TkjE/U5n//OxzHBY/0+Zg==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.4.2",
+        "@ionic/core": "8.4.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -4061,9 +4061,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -4167,11 +4167,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.4.2.tgz",
-      "integrity": "sha512-IDQy6a6oo9dG4Bu/svg/n8KSusTPY/bgI32FGGglm2nIe0F3hnjjIoS0Ikp0QdA4shqSnjV2Aq5AzGd3i6x5gg==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.4.3.tgz",
+      "integrity": "sha512-AqwmoRCjTDBIgmywE6VnOOacOry21ma6TWMS8Dg8ZGu41rT6edDSmX/lKvAAV+jg4TkjE/U5n//OxzHBY/0+Zg==",
       "requires": {
-        "@ionic/core": "8.4.2",
+        "@ionic/core": "8.4.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
@@ -6670,4 +6670,4 @@
       "dev": true
     }
   }
-}
+}

packages/react/package-lock.json

@@ -736,9 +736,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
@@ -12316,9 +12316,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -20499,4 +20499,4 @@
       "dev": true
     }
   }
-}
+}

packages/vue-router/package-lock.json

@@ -661,9 +661,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
@@ -853,12 +853,12 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.4.2.tgz",
-      "integrity": "sha512-GJZJJMXRZ1LP7bpIJquSrL8HC5Gwpz9ak/H6BzdhGIhDLEPfe//4EMkijbNGEnrlW6XSamN2lf6SrRZ1Lk5NMA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.4.3.tgz",
+      "integrity": "sha512-jg4zDRfSrk3jSx3jvYf618Nf4pwTngB2viNihsOcXd2o04JvNHytouEQ7zES40/u9+tctRd0Db98nRyDOqwrCw==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.4.2",
+        "@ionic/core": "8.4.3",
         "ionicons": "^7.0.0"
       }
     },
@@ -7882,9 +7882,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -7997,11 +7997,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.4.2.tgz",
-      "integrity": "sha512-GJZJJMXRZ1LP7bpIJquSrL8HC5Gwpz9ak/H6BzdhGIhDLEPfe//4EMkijbNGEnrlW6XSamN2lf6SrRZ1Lk5NMA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.4.3.tgz",
+      "integrity": "sha512-jg4zDRfSrk3jSx3jvYf618Nf4pwTngB2viNihsOcXd2o04JvNHytouEQ7zES40/u9+tctRd0Db98nRyDOqwrCw==",
       "requires": {
-        "@ionic/core": "8.4.2",
+        "@ionic/core": "8.4.3",
         "ionicons": "^7.0.0"
       }
     },
@@ -12802,4 +12802,4 @@
       "dev": true
     }
   }
-}
+}

packages/vue/package-lock.json

@@ -226,9 +226,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
@@ -4074,9 +4074,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-p1/avROJi+z/rTw07nkIi0hBsWw3oITVK3KCMrAccaViQpqQ6a692jX6xdnoycsj/ixeVjXgfV1Useu6hTNaHA==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -6686,4 +6686,4 @@
       "dev": true
     }
   }
-}
+}