fix(select): slotted label content works with outline notch (#27483)

Author: liamdebeasi

core/src/components/select/select.tsx

@@ -2,14 +2,15 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, forceUpdate } from '@stencil/core';
 import type { LegacyFormController } from '@utils/forms';
 import { createLegacyFormController } from '@utils/forms';
-import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from '@utils/helpers';
+import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes, raf } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { actionSheetController, alertController, popoverController } from '@utils/overlays';
 import type { OverlaySelect } from '@utils/overlays-interface';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
 import { watchForOptions } from '@utils/watch-options';
+import { win } from '@utils/window';
 import { caretDownSharp, chevronExpand } from 'ionicons/icons';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -55,6 +56,8 @@ export class Select implements ComponentInterface {
   private legacyFormController!: LegacyFormController;
   private inheritedAttributes: Attributes = {};
   private nativeWrapperEl: HTMLElement | undefined;
+  private notchSpacerEl: HTMLElement | undefined;
+  private notchVisibilityIO: IntersectionObserver | undefined;
 
   // This flag ensures we log the deprecation warning at most once.
   private hasLoggedDeprecationWarning = false;
@@ -665,13 +668,13 @@ export class Select implements ComponentInterface {
    * was passed.
    */
   private get labelText() {
-    const { el, label } = this;
+    const { label } = this;
 
     if (label !== undefined) {
       return label;
     }
 
-    const labelSlot = el.querySelector('[slot="label"]');
+    const { labelSlot } = this;
 
     if (labelSlot !== null) {
       return labelSlot.textContent;
@@ -740,14 +743,155 @@ export class Select implements ComponentInterface {
     );
   }
 
+  componentDidRender() {
+    if (this.needsExplicitNotchWidth()) {
+      /**
+       * Run this the frame after
+       * the browser has re-painted the select.
+       * Otherwise, the label element may have a width
+       * of 0 and the IntersectionObserver will be used.
+       */
+      raf(() => {
+        this.setNotchWidth();
+      });
+    }
+  }
+
+  /**
+   * Gets any content passed into the `label` slot,
+   * not the <slot> definition.
+   */
+  private get labelSlot() {
+    return this.el.querySelector('[slot="label"]');
+  }
+
   /**
    * Returns `true` if label content is provided
    * either by a prop or a content. If you want
    * to get the plaintext value of the label use
    * the `labelText` getter instead.
    */
   private get hasLabel() {
-    return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null;
+    return this.label !== undefined || this.labelSlot !== null;
+  }
+
+  private needsExplicitNotchWidth() {
+    if (
+      /**
+       * If the notch is not being used
+       * then we do not need to set the notch width.
+       */
+      this.notchSpacerEl === undefined ||
+      /**
+       * If no label is being used, then we
+       * do not need to estimate the notch width.
+       */
+      !this.hasLabel ||
+      /**
+       * If the label property is being used
+       * then we can render the label text inside
+       * of the notch and let the browser
+       * determine the notch size for us.
+       */
+      this.label !== undefined
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * When using a label prop we can render
+   * the label value inside of the notch and
+   * let the browser calculate the size of the notch.
+   * However, we cannot render the label slot in multiple
+   * places so we need to manually calculate the notch dimension
+   * based on the size of the slotted content.
+   *
+   * This function should only be used to set the notch width
+   * on slotted label content. The notch width for label prop
+   * content is automatically calculated based on the
+   * intrinsic size of the label text.
+   */
+  private setNotchWidth() {
+    const { el, notchSpacerEl } = this;
+
+    if (notchSpacerEl === undefined) {
+      return;
+    }
+
+    if (!this.needsExplicitNotchWidth()) {
+      notchSpacerEl.style.removeProperty('width');
+      return;
+    }
+
+    const width = this.labelSlot!.scrollWidth;
+    if (
+      /**
+       * If the computed width of the label is 0
+       * and notchSpacerEl's offsetParent is null
+       * then that means the element is hidden.
+       * As a result, we need to wait for the element
+       * to become visible before setting the notch width.
+       *
+       * We do not check el.offsetParent because
+       * that can be null if ion-select has
+       * position: fixed applied to it.
+       * notchSpacerEl does not have position: fixed.
+       */
+      width === 0 &&
+      notchSpacerEl.offsetParent === null &&
+      win !== undefined &&
+      'IntersectionObserver' in win
+    ) {
+      /**
+       * If there is an IO already attached
+       * then that will update the notch
+       * once the element becomes visible.
+       * As a result, there is no need to create
+       * another one.
+       */
+      if (this.notchVisibilityIO !== undefined) {
+        return;
+      }
+
+      const io = (this.notchVisibilityIO = new IntersectionObserver(
+        (ev) => {
+          /**
+           * If the element is visible then we
+           * can try setting the notch width again.
+           */
+          if (ev[0].intersectionRatio === 1) {
+            this.setNotchWidth();
+            io.disconnect();
+            this.notchVisibilityIO = undefined;
+          }
+        },
+        /**
+         * Set the root to be the select
+         * This causes the IO callback
+         * to be fired in WebKit as soon as the element
+         * is visible. If we used the default root value
+         * then WebKit would only fire the IO callback
+         * after any animations (such as a modal transition)
+         * finished, and there would potentially be a flicker.
+         */
+        { threshold: 0.01, root: el }
+      ));
+
+      io.observe(notchSpacerEl);
+      return;
+    }
+
+    /**
+     * If the element is visible then we can set the notch width.
+     * The notch is only visible when the label is scaled,
+     * which is why we multiply the width by 0.75 as this is
+     * the same amount the label element is scaled by in the
+     * select CSS (See $select-floating-label-scale in select.vars.scss).
+     */
+    notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
   }
 
   /**
@@ -770,7 +914,7 @@ export class Select implements ComponentInterface {
         <div class="select-outline-container">
           <div class="select-outline-start"></div>
           <div class="select-outline-notch">
-            <div class="notch-spacer" aria-hidden="true">
+            <div class="notch-spacer" aria-hidden="true" ref={(el) => (this.notchSpacerEl = el)}>
               {this.label}
             </div>
           </div>

core/src/components/select/test/fill/select.e2e.ts

@@ -120,6 +120,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const select = page.locator('ion-select');
         expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-label-floating`));
       });
+
       test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(
           `
@@ -167,3 +168,60 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: label slot'), () => {
+    test('should render the notch correctly with a slotted label', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-select
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-slotted-label`));
+    });
+    test('should render the notch correctly with a slotted label after the select was originally hidden', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <style>
+          .custom-label {
+            font-size: 30px;
+          }
+        </style>
+        <ion-select
+          fill="outline"
+          label-placement="stacked"
+          value="apple"
+          style="display: none"
+        >
+          <div slot="label" class="custom-label">My Label Content</div>
+          <ion-select-option value="apple">Apple</ion-select-option>
+        </ion-select>
+      `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+
+      await select.evaluate((el: HTMLIonSelectElement) => el.style.removeProperty('display'));
+
+      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-hidden-slotted-label`));
+    });
+  });
+});