chore: fix autofill for iphone

taiga-family · Jun 21, 2024 · b97f8b2 · b97f8b2
1 parent fd901e4
commit b97f8b2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/projects/demo/src/pages/documentation/real-world-form/index.html b/projects/demo/src/pages/documentation/real-world-form/index.html
@@ -46,6 +46,7 @@ <h3 class="tui-form__header tui-form__header_margin-top_none">Real World Form</h
                 inputmode="tel"
                 name="phone"
                 tuiTextfield
+                [attr.pattern]="phoneTextfieldPattern"
                 [maskito]="phoneMask"
             />
         </tui-input>

diff --git a/projects/demo/src/pages/documentation/real-world-form/index.ts b/projects/demo/src/pages/documentation/real-world-form/index.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
 import type {MaskitoOptions} from '@maskito/core';
@@ -9,6 +9,7 @@ import {
     maskitoRemoveOnBlurPlugin,
 } from '@maskito/kit';
 import {maskitoGetCountryFromNumber, maskitoPhoneOptionsGenerator} from '@maskito/phone';
+import {TUI_IS_APPLE} from '@taiga-ui/cdk';
 import {
     TuiButtonModule,
     TuiFlagPipeModule,
@@ -44,6 +45,8 @@ const ONLY_LATIN_LETTERS_RE = /^[a-z]+$/i;
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class RealWorldForm {
+    private readonly isApple = inject(TUI_IS_APPLE);
+
     protected readonly form = new FormGroup({
         name: new FormControl(''),
         surname: new FormControl(''),
@@ -98,6 +101,10 @@ export default class RealWorldForm {
         return maskitoGetCountryFromNumber(this.form.value.phone || '', metadata) || '';
     }
 
+    protected get phoneTextfieldPattern(): string {
+        return this.isApple ? '+[0-9-]{1,20}' : '';
+    }
+
     protected log(something: any): void {
         console.info(something);
     }