fix(input): label position and overflow is correct (#26248)

Author: liamdebeasi

core/src/components/input/input.md.outline.scss

@@ -60,17 +60,17 @@
   border-bottom: none;
 }
 
-:host(.input-fill-outline.input-label-placement-stacked) label,
-:host(.input-fill-outline.input-label-placement-floating) label {
+:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
+:host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper {
   @include transform-origin(center, top);
 }
 
 /**
  * The label should appear on top of an outline
  * container that overlaps it so it is always clickable.
  */
-:host(.input-fill-outline) label,
-:host(.input-fill-outline) label {
+:host(.input-fill-outline) .label-text-wrapper,
+:host(.input-fill-outline) .label-text-wrapper {
   position: relative;
 
   z-index: 1;
@@ -79,10 +79,10 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.has-focus.input-fill-outline.input-label-placement-floating) label,
-:host(.has-value.input-fill-outline.input-label-placement-floating) label,
-:host(.input-fill-outline.input-label-placement-stacked) label,
-:host(.input-fill-outline.input-label-placement-stacked) label {
+:host(.has-focus.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
+:host(.has-value.input-fill-outline.input-label-placement-floating) .label-text-wrapper,
+:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
+:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
   @include transform(translateY(-32%), scale(.75));
   @include margin(0);
 }

core/src/components/input/input.md.scss

@@ -77,12 +77,12 @@
  * When the input is focused the label should
  * take on the highlight color.
  */
-:host(.has-focus) label {
+:host(.has-focus) .label-text-wrapper {
   color: var(--highlight-color);
 }
 
-:host(.ion-touched.ion-valid) label,
-:host(.ion-touched.ion-invalid) label {
+:host(.ion-touched.ion-valid) .label-text-wrapper,
+:host(.ion-touched.ion-invalid) .label-text-wrapper {
   color: var(--highlight-color);
 }
 

core/src/components/input/input.scss

@@ -392,7 +392,7 @@
 // Input Label
 // ----------------------------------------------------------------
 
-.input-wrapper label {
+.label-text-wrapper {
   /**
    * The margin between the label and
    * the input should be on the end
@@ -410,6 +410,34 @@
   align-items: center;
 
   transition: color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1);
+
+  /**
+   * This ensures that double tapping this text
+   * clicks the <label> and focuses the input
+   * when a screen reader is enabled.
+   */
+  pointer-events: none;
+}
+
+/**
+ * We need to use two elements instead of
+ * one. The .label-text-wrapper is responsible
+ * for centering the label text vertically regardless
+ * of the input height using flexbox.
+ *
+ * The .label-text element is responsible for controlling
+ * overflow when label-placement="fixed".
+ * We want the ellipses to show up when the
+ * fixed label overflows, but text-overflow: ellipsis only
+ * works on block-level elements. A flex item is
+ * considered blockified (https://www.w3.org/TR/css-display-3/#blockify).
+ */
+.label-text {
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  overflow: hidden;
 }
 
 .input-wrapper input {
@@ -448,7 +476,7 @@
  * the input should be on the start
  * when the label sits at the end.
  */
-:host(.input-label-placement-end) label {
+:host(.input-label-placement-end) .label-text-wrapper {
   @include margin(0, 0, 0, 8px);
 }
 
@@ -459,9 +487,7 @@
  * Label is on the left of the input in LTR and
  * on the right in RTL. Label also has a fixed width.
  */
-:host(.input-label-placement-fixed) label {
-  @include margin(0, 0, 0, 0);
-
+:host(.input-label-placement-fixed) .label-text {
   flex: 0 0 100px;
 
   width: 100px;
@@ -490,8 +516,8 @@
  * up and to the left in LTR or
  * up and to the right in RTL.
  */
-:host(.input-label-placement-stacked) label,
-:host(.input-label-placement-floating) label {
+:host(.input-label-placement-stacked) .label-text-wrapper,
+:host(.input-label-placement-floating) .label-text-wrapper {
   @include transform-origin(start, top);
 }
 
@@ -508,7 +534,7 @@
  * This makes the label sit over the input
  * when the input is blurred and has no value.
  */
-:host(.input-label-placement-floating) label {
+:host(.input-label-placement-floating) .label-text-wrapper {
   @include transform(translateY(100%), scale(1));
 }
 
@@ -529,8 +555,8 @@
 /**
  * This makes the label sit above the input.
  */
-:host(.input-label-placement-stacked) label,
-:host(.has-focus.input-label-placement-floating) label,
-:host(.has-value.input-label-placement-floating) label {
+:host(.input-label-placement-stacked) .label-text-wrapper,
+:host(.has-focus.input-label-placement-floating) .label-text-wrapper,
+:host(.has-value.input-label-placement-floating) .label-text-wrapper {
   @include transform(translateY(50%), scale(.75));
 }

core/src/components/input/input.tsx

@@ -560,7 +560,11 @@ export class Input implements ComponentInterface {
       return;
     }
 
-    return <label htmlFor={this.inputId}>{this.label}</label>;
+    return (
+      <div class="label-text-wrapper">
+        <div class="label-text">{this.label}</div>
+      </div>
+    );
   }
 
   /**
@@ -619,7 +623,7 @@ export class Input implements ComponentInterface {
           'in-full-item': hostContext('ion-item:not(.item-lines-inset)', this.el),
         })}
       >
-        <div class="input-wrapper">
+        <label class="input-wrapper">
           {this.renderLabelContainer()}
           <div class="native-wrapper">
             <input
@@ -674,7 +678,7 @@ export class Input implements ComponentInterface {
             )}
           </div>
           {shouldRenderHighlight && <div class="input-highlight"></div>}
-        </div>
+        </label>
         {this.renderBottomContent()}
       </Host>
     );

core/src/components/input/test/input.e2e.ts

@@ -10,7 +10,7 @@ test.describe('input: rendering', () => {
   test('should not render the label element if no label was passed', async ({ page }) => {
     await page.setContent(`<ion-input aria-label="my hidden label"></ion-label>`);
 
-    const label = page.locator('ion-input label');
+    const label = page.locator('ion-input .label-text-wrapper');
     await expect(label).toBeHidden();
   });
 });

core/src/components/input/test/label-placement/input.e2e.ts

@@ -24,9 +24,11 @@ test.describe('input: label placement end', () => {
 });
 
 test.describe('input: label placement fixed', () => {
-  test('label should appear on the starting side of the input and have a fixed width', async ({ page }) => {
+  test('label should appear on the starting side of the input, have a fixed width, and show ellipses', async ({
+    page,
+  }) => {
     await page.setContent(`
-      <ion-input label="Email" value="[email protected]" label-placement="fixed"></ion-input>
+      <ion-input label="Email Email Email Email Email Email" value="[email protected]" label-placement="fixed"></ion-input>
     `);
 
     const input = page.locator('ion-input');