From b97f8b277350872a8364baa934d65f0e01cbe6a4 Mon Sep 17 00:00:00 2001
From: Nikita Barsukov <nikita.s.barsukov@gmail.com>
Date: Fri, 21 Jun 2024 17:13:59 +0300
Subject: [PATCH] chore: fix autofill for iphone

---
 .../src/pages/documentation/real-world-form/index.html   | 1 +
 .../src/pages/documentation/real-world-form/index.ts     | 9 ++++++++-
 2 files changed, 9 insertions(+), 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
index 7b06cc8aa..58158b700 100644
--- 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
index 50f7e464f..ac224d6a4 100644
--- 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);
     }