fix(kit): InputDate fix mobile calendar (#104)

Closes #100
taiga-family · Jan 15, 2021 · 0fd20e5 · 0fd20e5
1 parent 3410cc3
commit 0fd20e5
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>