fix(addon-commerce): InputCard fix autofill (#8728)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Aug 29, 2024 · 226a763 · 226a763
1 parent dc75d3d
commit 226a763
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 6 deletions.
diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.style.less b/projects/addon-commerce/components/input-card-group/input-card-group.style.less
@@ -64,7 +64,7 @@
 
     padding: 1.25rem var(--tui-padding-l) 0;
     box-sizing: border-box;
-    font: var(--tui-font-text-s);
+    font: var(--tui-font-text-m);
     line-height: 2.25rem;
     color: var(--tui-text-primary);
     white-space: nowrap;
@@ -107,13 +107,20 @@
     outline: none;
     background: transparent;
     box-sizing: border-box;
-    font: var(--tui-font-text-s);
+    font: var(--tui-font-text-m);
     color: var(--tui-text-primary);
 
     &::placeholder {
         color: var(--tui-text-tertiary);
     }
 
+    &:-webkit-autofill {
+        -webkit-text-fill-color: var(--tui-text-primary) !important;
+        caret-color: var(--tui-text-primary) !important;
+        border-color: var(--tui-service-autofill-background) !important;
+        box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
+    }
+
     &&&_card {
         // @note: (&&&_) it's increasing css cascade priority
         &:not(.t-input_hidden),

diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.template.html b/projects/addon-commerce/components/input-card-group/input-card-group.template.html
@@ -65,6 +65,7 @@
             #inputExpire
             automation-id="tui-input-card-group__expire"
             inputmode="numeric"
+            maxlength="5"
             placeholder="00/00"
             translate="no"
             class="t-input"

diff --git a/projects/addon-commerce/components/input-expire/input-expire.directive.ts b/projects/addon-commerce/components/input-expire/input-expire.directive.ts
@@ -12,6 +12,8 @@ import {tuiMaskito} from '@taiga-ui/kit/utils';
         inputmode: 'numeric',
         placeholder: '00/00',
         translate: 'no',
+        maxlength: '5',
+        '[attr.name]': 'autocomplete ? "ccexpiryyear" : null',
         '[autocomplete]': 'autocomplete ? "cc-exp" : "off"',
     },
 })

diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less
@@ -185,6 +185,7 @@ tui-textfield {
             }
         }
 
+        &:-webkit-autofill,
         &:not(._empty):not(:placeholder-shown) {
             & ~ label {
                 font-size: 0.83em;

diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less
@@ -38,14 +38,16 @@
 
     &:-webkit-autofill {
         -webkit-text-fill-color: var(--tui-text-primary) !important;
-        border-color: var(--tui-service-autofill-background);
+        caret-color: var(--tui-text-primary) !important;
+        border-color: var(--tui-service-autofill-background) !important;
         box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
     }
 }
 
 [tuiTheme='dark'] [tuiAppearance][data-appearance='textfield'],
 [tuiTheme='dark'][tuiAppearance][data-appearance='textfield'] {
     background-color: var(--tui-background-neutral-1);
+    color-scheme: dark;
 
     .appearance-hover({
         background-color: var(--tui-background-neutral-1-hover);

diff --git a/projects/demo/src/modules/components/input-card/examples/1/index.html b/projects/demo/src/modules/components/input-card/examples/1/index.html
@@ -11,7 +11,7 @@
     </tui-textfield>
     <section>
         <tui-textfield>
-            <label tuiLabel>Expire date</label>
+            <label tuiLabel>Expires</label>
             <input
                 formControlName="expire"
                 tuiInputExpire

diff --git a/projects/kit/components/radio-list/radio-list.component.ts b/projects/kit/components/radio-list/radio-list.component.ts
@@ -1,5 +1,5 @@
 import {NgForOf} from '@angular/common';
-import type {QueryList} from '@angular/core';
+import {inject, type QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -17,6 +17,7 @@ import {
     TUI_FALSE_HANDLER,
 } from '@taiga-ui/cdk/constants';
 import {TuiValidator} from '@taiga-ui/cdk/directives/validator';
+import {TuiIdService} from '@taiga-ui/cdk/services';
 import type {TuiBooleanHandler, TuiIdentityMatcher} from '@taiga-ui/cdk/types';
 import type {TuiSizeS, TuiValueContentContext} from '@taiga-ui/core/types';
 import {TuiRadio} from '@taiga-ui/kit/components/radio';
@@ -50,6 +51,8 @@ export class TuiRadioList<T> extends TuiControl<T> {
     @ViewChildren(NgControl)
     private readonly controls: QueryList<NgControl> = EMPTY_QUERY;
 
+    private readonly id = inject(TuiIdService).generate();
+
     protected validator = computed(() =>
         this.invalid() ? ERROR : Validators.nullValidator,
     );
@@ -71,7 +74,7 @@ export class TuiRadioList<T> extends TuiControl<T> {
         String($implicit);
 
     protected get name(): string {
-        return this.control.name?.toString() || '';
+        return `${this.control.name}-${this.id}`;
     }
 
     protected onFocusOut(): void {