fix(masked-input): Value not committed on auto-fill behavior (#1932)

* fix(masked-input): Value not commited on auto-fill behavior

* chore: Added storybook sample reproducing the issue

* refactor(input): autofill styles

* remove(datepicker): Autofill story

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: rkaraivanov

src/components/date-picker/date-picker.spec.ts

@@ -969,7 +969,6 @@ describe('Date picker', () => {
 
     it('issue 1884 - should emit igcChange event in dialog mode after clearing the value and losing focus', async () => {
       const eventSpy = spy(picker, 'emitEvent');
-      // const nativeInput = dateTimeInput.renderRoot.querySelector('input')!;
 
       // Dropdown mode
 

src/components/input/themes/input.base.scss

@@ -45,14 +45,8 @@
     // This is a hack that removes the autofill background and it's essential,
     // otherwise the background is on top of the floating label in material theme.
     // The !important flag is because themes that defin transition delay on that element are overriding the transition delay hack
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus,
-    &:-webkit-autofill:active,
-    &:autofill,
-    &:autofill:hover,
-    &:autofill:focus,
-    &:autofill:active{
+    &:is(:-webkit-autofill, :autofill) {
+        transition-property: background-color, color !important;
         transition-delay: 99999s !important;
     }
 }

src/components/mask-input/mask-input-base.ts

@@ -116,6 +116,16 @@ export abstract class IgcMaskInputBaseComponent extends IgcInputBaseComponent {
           value.substring(this._inputSelection.start, this._inputSelection.end),
           { ...this._inputSelection }
         );
+
+      // Potential browser auto-fill behavior
+      case undefined:
+        return this._updateInput(
+          value.substring(start, this._inputSelection.end),
+          {
+            start,
+            end: this._inputSelection.end,
+          }
+        );
     }
   }