refactor(select): move function to utils

Author: thetaPC

core/src/components/input/input.tsx

@@ -14,7 +14,7 @@ import {
   h,
 } from '@stencil/core';
 import type { NotchController } from '@utils/forms';
-import { createNotchController } from '@utils/forms';
+import { createNotchController, checkInvalidState } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from '@utils/helpers';
 import { createSlotMutationController } from '@utils/slot-mutation-controller';
@@ -403,16 +403,6 @@ export class Input implements ComponentInterface {
     };
   }
 
-  /**
-   * Checks if the input is in an invalid state based on Ionic validation classes
-   */
-  private checkInvalidState(): boolean {
-    const hasIonTouched = this.el.classList.contains('ion-touched');
-    const hasIonInvalid = this.el.classList.contains('ion-invalid');
-
-    return hasIonTouched && hasIonInvalid;
-  }
-
   connectedCallback() {
     const { el } = this;
 
@@ -426,7 +416,7 @@ export class Input implements ComponentInterface {
     // Watch for class changes to update validation state
     if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
       this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = this.checkInvalidState();
+        const newIsInvalid = checkInvalidState(el);
         if (this.isInvalid !== newIsInvalid) {
           this.isInvalid = newIsInvalid;
           // Force a re-render to update aria-describedby immediately
@@ -441,7 +431,7 @@ export class Input implements ComponentInterface {
     }
 
     // Always set initial state
-    this.isInvalid = this.checkInvalidState();
+    this.isInvalid = checkInvalidState(el);
 
     this.debounceChanged();
     if (Build.isBrowser) {

core/src/components/select/select.tsx

@@ -1,7 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
 import type { NotchController } from '@utils/forms';
-import { compareOptions, createNotchController, isOptionSelected } from '@utils/forms';
+import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from '@utils/forms';
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
@@ -310,7 +310,7 @@ export class Select implements ComponentInterface {
     // Watch for class changes to update validation state.
     if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
       this.validationObserver = new MutationObserver(() => {
-        const newIsInvalid = this.checkInvalidState();
+        const newIsInvalid = checkInvalidState(this.el);
         if (this.isInvalid !== newIsInvalid) {
           this.isInvalid = newIsInvalid;
           /**
@@ -342,7 +342,7 @@ export class Select implements ComponentInterface {
     }
 
     // Always set initial state
-    this.isInvalid = this.checkInvalidState();
+    this.isInvalid = checkInvalidState(this.el);
   }
 
   componentWillLoad() {
@@ -1168,17 +1168,6 @@ export class Select implements ComponentInterface {
     return <div class="select-bottom">{this.renderHintText()}</div>;
   }
 
-  /**
-   * Checks if the input is in an invalid state based
-   * on Ionic validation classes.
-   */
-  private checkInvalidState(): boolean {
-    const hasIonTouched = this.el.classList.contains('ion-touched');
-    const hasIonInvalid = this.el.classList.contains('ion-invalid');
-
-    return hasIonTouched && hasIonInvalid;
-  }
-
   render() {
     const {
       disabled,

core/src/utils/forms/index.ts

@@ -1,2 +1,3 @@
 export * from './notch-controller';
 export * from './compare-with-utils';
+export * from './validity';

core/src/utils/forms/validity.ts

@@ -0,0 +1,15 @@
+type FormElement = HTMLIonInputElement | HTMLIonSelectElement;
+
+/**
+ * Checks if the form element is in an invalid state based on
+ * Ionic validation classes.
+ *
+ * @param el The form element to check.
+ * @returns `true` if the element is invalid, `false` otherwise.
+ */
+export const checkInvalidState = (el: FormElement): boolean => {
+  const hasIonTouched = el.classList.contains('ion-touched');
+  const hasIonInvalid = el.classList.contains('ion-invalid');
+
+  return hasIonTouched && hasIonInvalid;
+};