Input: fix initial value not shown in Chrome (#3338)

Co-authored-by: Jakob Engelbrecht <jakob@basher.dk>

apps/cookbook/src/app/showcase/form-field-showcase/form-field-showcase.component.html

@@ -109,14 +109,24 @@ <h3>Date</h3>
     #inputDateExample
   ></cookbook-form-field-input-date-example>
 </cookbook-example-viewer>
+
+<p>
+  By default (i.e. when not using the native datepicker) the value supplied to the input should be formatted according to the current
+  locale. When opting into the native datepicker, the value should be in the
+  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#date_strings">
+    Date strings format
+  </a>
+  .
+</p>
+
 <p>
   <em>
     <strong>*Please note:</strong>
-    Date-mask is based on
+    The placeholder is based on
     <code>LOCALE_ID</code>
-    . When
+    . E.g. when
     <code>DA</code>
-    the date-mask will be
+    the placeholder will be
     <code>dd.mm.åååå</code>
   </em>
 </p>

libs/designsystem/form-field/src/directives/date/date-input.directive.spec.ts

@@ -36,11 +36,16 @@ describe('DateInputDirective', () => {
       expect(instance).toBeDefined();
     });
 
-    it('should have initial date-mask value', () => {
+    it('should have initial date-mask placeholder', () => {
       // @ts-ignore
       expect(spectator.element.placeholder).toEqual('mm/dd/yyyy');
     });
 
+    it('should not have initial date-mask value', () => {
+      // @ts-ignore
+      expect(spectator.element.value).toEqual('');
+    });
+
     it('should keep date-mask when typing', () => {
       spectator.typeInElement('11', spectator.element);
       expect(spectator.element).toHaveValue('11/dd/yyyy');
@@ -132,6 +137,22 @@ describe('DateInputDirective', () => {
     });
   });
 
+  describe('when configured with value', () => {
+    beforeEach(() => {
+      spectator = createDirective(`<input kirby-input type="date" value="01-01-2024" />`);
+    });
+
+    it('should have date-mask placeholder', () => {
+      // @ts-ignore
+      expect(spectator.element.placeholder).toEqual('mm/dd/yyyy');
+    });
+
+    it('should have initial date-mask value', () => {
+      // @ts-ignore
+      expect(spectator.element.value).toEqual('01/01/2024');
+    });
+  });
+
   describe('when configured with prefillYear', () => {
     beforeEach(() => {
       spectator = createDirective(`<input kirby-input type="date" [prefillYear]="true" />`);

libs/designsystem/form-field/src/directives/date/date-input.directive.ts

@@ -61,6 +61,11 @@ export class DateInputDirective implements AfterViewInit {
     @Inject(LOCALE_ID) private locale: string
   ) {
     this.isDateInput = this.elementRef.nativeElement.type === 'date';
+    if (this.isDateInput) {
+      // Remove type to avoid user-agent specific behaviour for [type="date"]
+      // Has to be done in constructor to avoid browser behavior kicking in
+      this.elementRef.nativeElement.removeAttribute('type');
+    }
   }
 
   ngAfterViewInit(): void {
@@ -71,10 +76,12 @@ export class DateInputDirective implements AfterViewInit {
     // This case is identical to date input fields _before_ native date picker
     // option was introduced
     if (this.enableInputMask) {
-      // Remove type to avoid user-agent specific behaviour for [type="date"]
-      this.elementRef.nativeElement.removeAttribute('type');
       this.initMask();
     }
+
+    if (this.useNativeDatePicker) {
+      this.elementRef.nativeElement.setAttribute('type', 'date');
+    }
   }
 
   private initMask(): void {