diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 3a2135421c..fb940c9d99 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/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, getNextSiblingOfType } from '@utils/helpers'; +import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers'; import { hostContext } from '@utils/theme'; import { getIonMode } from '../../global/ionic-global'; @@ -65,41 +65,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { this.updateState(); } - private waitForSegmentContent(ionSegment: HTMLIonSegmentElement | null, contentId: string): Promise { - 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(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() { + connectedCallback() { const segmentEl = (this.segmentEl = this.el.closest('ion-segment')); if (segmentEl) { this.updateState(); @@ -107,27 +73,8 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { addEventListener(segmentEl, 'ionStyle', this.updateStyle); } - // Return if there is no contentId defined - if (!this.contentId) return; - - 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; - } - - // Ensure the found element is a valid ION-SEGMENT-CONTENT - if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') { - console.error(`Segment Button: Element with id="${this.contentId}" is not an element.`); - return; - } - // Prevent buttons from being disabled when associated with segment content - if (this.disabled) { + if (this.contentId && this.disabled) { console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an .`); this.disabled = false; } @@ -146,6 +93,24 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { this.inheritedAttributes = { ...inheritAttributes(this.el, ['aria-label']), }; + + // 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}".`); + return; + } + + // Ensure the found element is a valid ION-SEGMENT-CONTENT + if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') { + console.error(`Segment Button: Element with id="${this.contentId}" is not an element.`); + return; + } } private get hasLabel() { diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts index 1a3cd15b0d..e2a65407c0 100644 --- a/core/src/utils/helpers.ts +++ b/core/src/utils/helpers.ts @@ -388,17 +388,6 @@ export const shallowEqualStringMap = ( return true; }; -export const getNextSiblingOfType = (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; -}; - /** * Checks input for usable number. Not NaN and not Infinite. */