diff --git a/src/material/timepicker/timepicker-input.ts b/src/material/timepicker/timepicker-input.ts index 7af16d3a29e6..2319299120c9 100644 --- a/src/material/timepicker/timepicker-input.ts +++ b/src/material/timepicker/timepicker-input.ts @@ -285,7 +285,9 @@ export class MatTimepickerInput implements ControlValueAccessor, Validator, O this._formatValue(value); } - this._onTouched?.(); + if (!this.timepicker().isOpen()) { + this._onTouched?.(); + } } /** Handles the `keydown` event. */ diff --git a/src/material/timepicker/timepicker.spec.ts b/src/material/timepicker/timepicker.spec.ts index 080745926f98..7b66711ac900 100644 --- a/src/material/timepicker/timepicker.spec.ts +++ b/src/material/timepicker/timepicker.spec.ts @@ -955,6 +955,18 @@ describe('MatTimepicker', () => { fixture.detectChanges(); expect(fixture.componentInstance.control.touched).toBe(false); + getInput(fixture).click(); + fixture.detectChanges(); + dispatchFakeEvent(getInput(fixture), 'blur'); + fixture.detectChanges(); + expect(fixture.componentInstance.control.touched).toBe(false); + }); + + it('should mark the control as touched on blur while dropdown is open', () => { + const fixture = TestBed.createComponent(TimepickerWithForms); + fixture.detectChanges(); + expect(fixture.componentInstance.control.touched).toBe(false); + dispatchFakeEvent(getInput(fixture), 'blur'); fixture.detectChanges(); expect(fixture.componentInstance.control.touched).toBe(true);