From 0fd20e58a3c22763b94881541a8e21b9bb2b39e0 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Fri, 15 Jan 2021 14:12:50 +0300
Subject: [PATCH] fix(kit): `InputDate` fix mobile calendar (#104)

Closes #100
---
 .../input-date-range/input-date-range.component.ts       | 7 +------
 .../input-date-range/input-date-range.template.html      | 2 +-
 .../input-date-time/input-date-time.component.ts         | 2 +-
 .../input-date-time/input-date-time.template.html        | 2 +-
 .../kit/components/input-date/input-date.component.ts    | 9 ++-------
 .../kit/components/input-date/input-date.template.html   | 4 ++--
 6 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/projects/kit/components/input-date-range/input-date-range.component.ts b/projects/kit/components/input-date-range/input-date-range.component.ts
index b9a3a042a6a8..6b9cd9b39a92 100644
--- a/projects/kit/components/input-date-range/input-date-range.component.ts
+++ b/projects/kit/components/input-date-range/input-date-range.component.ts
@@ -228,17 +228,12 @@ export class TuiInputDateRangeComponent
     }
 
     onClick() {
-        if (!this.computedMobile) {
+        if (!this.isMobile || !this.mobileCalendar) {
             this.toggle();
-        }
-    }
 
-    onMobileMouseDown(event: TouchEvent) {
-        if (!this.mobileCalendar) {
             return;
         }
 
-        event.stopPropagation();
         this.dialogService
             .open<TuiDayRange>(
                 new PolymorpheusComponent(this.mobileCalendar, this.injector),
diff --git a/projects/kit/components/input-date-range/input-date-range.template.html b/projects/kit/components/input-date-range/input-date-range.template.html
index d93c873035f6..e61e157d3b78 100644
--- a/projects/kit/components/input-date-range/input-date-range.template.html
+++ b/projects/kit/components/input-date-range/input-date-range.template.html
@@ -34,7 +34,7 @@
             automation-id="tui-input-date-range__icon"
             class="icon"
             [src]="calendarIcon"
-            (touchstart)="onMobileMouseDown($event)"
+            (click.prevent)="onClick()"
         ></tui-svg>
     </ng-template>
 
diff --git a/projects/kit/components/input-date-time/input-date-time.component.ts b/projects/kit/components/input-date-time/input-date-time.component.ts
index 573b16dc3435..37c864d8600b 100644
--- a/projects/kit/components/input-date-time/input-date-time.component.ts
+++ b/projects/kit/components/input-date-time/input-date-time.component.ts
@@ -184,7 +184,7 @@ export class TuiInputDateTimeComponent
         return !this.computedDisabled && !this.readOnly;
     }
 
-    onMouseDown() {
+    onClick() {
         this.open = !this.open;
     }
 
diff --git a/projects/kit/components/input-date-time/input-date-time.template.html b/projects/kit/components/input-date-time/input-date-time.template.html
index 25b1ddc0a228..b1e1a5e9d880 100644
--- a/projects/kit/components/input-date-time/input-date-time.template.html
+++ b/projects/kit/components/input-date-time/input-date-time.template.html
@@ -20,7 +20,7 @@
         (valueChange)="onValueChange($event)"
         (hoveredChange)="onHovered($event)"
         (focusedChange)="onFocused($event)"
-        (mousedown)="onMouseDown()"
+        (click.prevent)="onClick()"
     >
         <ng-content></ng-content>
     </tui-primitive-textfield>
diff --git a/projects/kit/components/input-date/input-date.component.ts b/projects/kit/components/input-date/input-date.component.ts
index cf01a6b13af8..eb69973040ad 100644
--- a/projects/kit/components/input-date/input-date.component.ts
+++ b/projects/kit/components/input-date/input-date.component.ts
@@ -195,18 +195,13 @@ export class TuiInputDateComponent
         this.open = false;
     }
 
-    onMouseDown() {
-        if (!this.computedMobile) {
+    onClick() {
+        if (!this.isMobile || !this.mobileCalendar) {
             this.open = !this.open;
-        }
-    }
 
-    onMobileMouseDown(event: TouchEvent) {
-        if (!this.mobileCalendar) {
             return;
         }
 
-        event.stopPropagation();
         this.dialogService
             .open<TuiDay>(new PolymorpheusComponent(this.mobileCalendar, this.injector), {
                 size: 'fullscreen',
diff --git a/projects/kit/components/input-date/input-date.template.html b/projects/kit/components/input-date/input-date.template.html
index dc87705aa189..8963796c0d73 100644
--- a/projects/kit/components/input-date/input-date.template.html
+++ b/projects/kit/components/input-date/input-date.template.html
@@ -22,7 +22,7 @@
         (valueChange)="onValueChange($event)"
         (hoveredChange)="onHovered($event)"
         (focusedChange)="onFocused($event)"
-        (mousedown)="onMouseDown()"
+        (click.prevent)="onClick()"
     >
         <ng-content></ng-content>
     </tui-primitive-textfield>
@@ -32,7 +32,7 @@
             automation-id="tui-input-date-range__icon"
             class="icon"
             [src]="calendarIcon"
-            (touchstart)="onMobileMouseDown($event)"
+            (click.prevent)="onClick()"
         ></tui-svg>
     </ng-template>