Merge pull request #73 from jrquick17/tab-focus

Fix on tab popup
RenovoSolutions · Oct 20, 2019 · ca34948 · ca34948
2 parents b80ccd2 + eb5d4ff
commit ca34948
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/app/datePicker.component/datePicker.component.html b/src/app/datePicker.component/datePicker.component.html
@@ -9,7 +9,8 @@
                    [ngStyle]="styles.input"
                    [disabled]="disableInput || disablePicker"
                    [placeholder]="placeholder"
-                   (click)="pickerVisible = !pickerVisible"
+                   (focusin)="pickerVisible = true"
+                   (focusout)="pickerVisible = false"
                    [value]="formattedDate"
                    (change)="setDate($event.target.value)"
                    [tabindex]="inputTabIndex"
@@ -18,7 +19,8 @@
 			<button type="button"
                     [ngStyle]="styles.button"
                     [disabled]="disableButton || disablePicker"
-                    (click)="pickerVisible = !pickerVisible">
+                    (focusin)="pickerVisible = true"
+                    (focusout)="pickerVisible = false">
 				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
 					<path fill="#000000" d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z" />
 				</svg>

diff --git a/src/app/dateTimePicker.component/dateTimePicker.component.html b/src/app/dateTimePicker.component/dateTimePicker.component.html
@@ -13,15 +13,17 @@
                    [ngStyle]="styles.input"
                    [disabled]="disableInput || disablePicker"
                    [placeholder]="placeholder"
-                   (click)="pickerVisible = !pickerVisible"
+                   (focusin)="pickerVisible = true"
+                   (focusout)="pickerVisible = false"
                    [value]="formattedDate"
                    (change)="setDateTime($event.target.value)"
 			/>
 
 			<button type="button"
                     [ngStyle]="styles.button"
                     [disabled]="disableButton || disablePicker"
-                    (click)="pickerVisible = !pickerVisible">
+                    (focusin)="pickerVisible = true"
+                    (focusout)="pickerVisible = false">
                 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
                     <path fill="#000000" d="M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z" />
                 </svg>

diff --git a/src/app/timePicker.component/timePicker.component.html b/src/app/timePicker.component/timePicker.component.html
@@ -16,13 +16,15 @@
                    [placeholder]="placeholder"
                    [value]="formattedTime"
                    (change)="setFormattedTime($event.target.value)"
-                   (click)="pickerVisible = !pickerVisible"
+                   (focusin)="pickerVisible = true"
+                   (focusout)="pickerVisible = false"
 			/>
 
 			<button type="button"
                     [ngStyle]="styles.button"
                     [disabled]="disableButton || disablePicker"
-                    (click)="pickerVisible = !pickerVisible">
+                    (focusin)="pickerVisible = true"
+                    (focusout)="pickerVisible = false">
 				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
 					<path fill="#000000" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
 				</svg>