fix(material/datepicker): date range inputs not aligning in some cases (#25967)

Currently we use two different approaches to align the start and end parts of the date range. The start is absolutely-positioned while the end is `relative` which ends up misaligning on some browsers and typography configurations.

These changes make both positioned absolutely since some browsers don't handle `line-height` on inputs reliably.

Fixes #25955.

Author: crisbeto

src/material/datepicker/date-range-input-parts.ts

@@ -142,6 +142,13 @@ abstract class MatDateRangeInputPartBase<D>
     this._elementRef.nativeElement.focus();
   }
 
+  /** Gets the value that should be used when mirroring the input's size. */
+  getMirrorValue(): string {
+    const element = this._elementRef.nativeElement;
+    const value = element.value;
+    return value.length > 0 ? value : element.placeholder;
+  }
+
   /** Handles `input` events on the input element. */
   override _onInput(value: string) {
     super._onInput(value);
@@ -286,13 +293,6 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpd
     this._rangeInput._handleChildValueChange();
   }
 
-  /** Gets the value that should be used when mirroring the input's size. */
-  getMirrorValue(): string {
-    const element = this._elementRef.nativeElement;
-    const value = element.value;
-    return value.length > 0 ? value : element.placeholder;
-  }
-
   override _onKeydown(event: KeyboardEvent) {
     const endInput = this._rangeInput._endInput;
     const element = this._elementRef.nativeElement;

src/material/datepicker/date-range-input.html

@@ -2,19 +2,22 @@
   class="mat-date-range-input-container"
   cdkMonitorSubtreeFocus
   (cdkFocusChange)="_updateFocus($event)">
-  <div class="mat-date-range-input-start-wrapper">
+  <div class="mat-date-range-input-wrapper">
     <ng-content select="input[matStartDate]"></ng-content>
     <span
       class="mat-date-range-input-mirror"
-      aria-hidden="true">{{_getInputMirrorValue()}}</span>
+      aria-hidden="true">{{_getInputMirrorValue('start')}}</span>
   </div>
 
   <span
     class="mat-date-range-input-separator"
     [class.mat-date-range-input-separator-hidden]="_shouldHideSeparator()">{{separator}}</span>
 
-  <div class="mat-date-range-input-end-wrapper">
+  <div class="mat-date-range-input-wrapper mat-date-range-input-end-wrapper">
     <ng-content select="input[matEndDate]"></ng-content>
+    <span
+      class="mat-date-range-input-mirror"
+      aria-hidden="true">{{_getInputMirrorValue('end')}}</span>
   </div>
 </div>
 

src/material/datepicker/date-range-input.scss

@@ -45,8 +45,24 @@ $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spaci
   transition: none;
 }
 
+// Wrapper around the inner inputs. Used to facilitate the auto-resizing input.
+.mat-date-range-input-wrapper {
+  position: relative;
+  overflow: hidden;
+  max-width: $date-range-input-part-max-width;
+}
+
+.mat-date-range-input-end-wrapper {
+  // Allow the end input to fill the rest of the available space.
+  flex-grow: 1;
+}
+
 // Underlying input inside the range input.
 .mat-date-range-input-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+
   // Reset the input so it's just a transparent rectangle.
   font: inherit;
   background: transparent;
@@ -60,6 +76,10 @@ $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spaci
   -webkit-appearance: none;
   width: 100%;
 
+  // Does nothing on Chrome, but necessary for the text
+  // to align in some cases on Safari and Firefox.
+  height: 100%;
+
   // Undo the red box-shadow glow added by Firefox on invalid inputs.
   // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
   &:-moz-ui-invalid {
@@ -101,7 +121,7 @@ $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spaci
 // We want the start input to be flush against the separator, no matter how much text it has, but
 // the problem is that inputs have a fixed width. We work around the issue by implementing an
 // auto-resizing input that stretches based on its text, up to a point. It works by having
-// a relatively-positioned wrapper (`.mat-date-range-input-start-wrapper` below) and an absolutely-
+// a relatively-positioned wrapper (`.mat-date-range-input-wrapper` below) and an absolutely-
 // positioned `input`, as well as a `span` inside the wrapper which mirrors the input's value and
 // placeholder. As the user is typing, the value gets mirrored in the span which causes the wrapper
 // to stretch and the input with it.
@@ -122,25 +142,6 @@ $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spaci
   min-width: 2px;
 }
 
-// Wrapper around the start input. Used to facilitate the auto-resizing input.
-.mat-date-range-input-start-wrapper {
-  position: relative;
-  overflow: hidden;
-  max-width: $date-range-input-part-max-width;
-
-  .mat-date-range-input-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-
-// Wrapper around the end input that makes sure that it has the proper size.
-.mat-date-range-input-end-wrapper {
-  flex-grow: 1;
-  max-width: $date-range-input-part-max-width;
-}
-
 .mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix {
   // Bump the default width slightly since it's somewhat cramped with two inputs and a separator.
   width: 200px;

src/material/datepicker/date-range-input.ts

@@ -349,8 +349,9 @@ export class MatDateRangeInput<D>
   }
 
   /** Gets the value that is used to mirror the state input. */
-  _getInputMirrorValue() {
-    return this._startInput ? this._startInput.getMirrorValue() : '';
+  _getInputMirrorValue(part: 'start' | 'end') {
+    const input = part === 'start' ? this._startInput : this._endInput;
+    return input ? input.getMirrorValue() : '';
   }
 
   /** Whether the input placeholders should be hidden. */

tools/public_api_guard/material/datepicker.md

@@ -585,7 +585,7 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
     getConnectedOverlayOrigin(): ElementRef;
     // (undocumented)
     _getEndDateAccessibleName(): string;
-    _getInputMirrorValue(): string;
+    _getInputMirrorValue(part: 'start' | 'end'): string;
     getOverlayLabelId(): string | null;
     // (undocumented)
     _getStartDateAccessibleName(): string;
@@ -826,7 +826,6 @@ export class MatStartDate<D> extends _MatDateRangeInputBase<D> implements CanUpd
     protected _assignValueToModel(value: D | null): void;
     // (undocumented)
     protected _formatValue(value: D | null): void;
-    getMirrorValue(): string;
     // (undocumented)
     protected _getValueFromModel(modelValue: DateRange<D>): D | null;
     // (undocumented)