IBX-4791: [Date picker] Cannot open date time picker by clicking on c…

…alendar icon in the input (#678)
ibexa · Feb 15, 2023 · 6d2074a · 6d2074a
1 parent 58b070d
commit 6d2074a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/core/date.time.picker.js b/src/bundle/Resources/public/js/scripts/core/date.time.picker.js
@@ -6,11 +6,14 @@
         time_24hr: true,
         formatDate: (date) => formatShortDateTime(date, null),
     };
+
     class DateTimePicker {
         constructor(config) {
             this.container = config.container;
             this.fieldWrapper = this.container.querySelector('.ibexa-date-time-picker');
             this.inputField = this.fieldWrapper.querySelector('.ibexa-date-time-picker__input');
+            this.actionsWrapper = this.fieldWrapper.querySelector('.ibexa-input-text-wrapper__actions');
+            this.calendarBtn = this.actionsWrapper.querySelector('.ibexa-input-text-wrapper__action-btn--calendar');
             this.clearBtn = this.fieldWrapper.querySelector('.ibexa-input-text-wrapper__action-btn--clear');
             this.customOnChange = config.onChange;
 
@@ -23,6 +26,7 @@
                 ...DEFAULT_CONFIG,
                 inline: this.fieldWrapper.classList.contains('ibexa-date-time-picker--inline-datetime-popup'),
                 onChange: this.onChange,
+                ignoredFocusElements: [this.actionsWrapper],
                 ...(config.flatpickrConfig ?? {}),
             };
 
@@ -95,6 +99,13 @@
             this.flatpickrInstance = flatpickr(this.inputField, this.flatpickrConfig);
 
             this.inputField.addEventListener('input', this.onInput, false);
+            this.calendarBtn.addEventListener(
+                'click',
+                () => {
+                    this.flatpickrInstance.open();
+                },
+                false,
+            );
 
             if (this.flatpickrInstance.config.enableTime) {
                 this.flatpickrInstance.minuteElement.addEventListener('keyup', this.onKeyUp.bind(this, true), false);

diff --git a/src/bundle/Resources/public/scss/_date-time-picker.scss b/src/bundle/Resources/public/scss/_date-time-picker.scss
@@ -19,8 +19,10 @@
         width: 100%;
     }
 
-    .ibexa-input-text-wrapper__actions {
-        top: calculateRem(24px);
+    .ibexa-input-text-wrapper {
+        &__actions {
+            top: calculateRem(24px);
+        }
     }
 
     &--small {
@@ -35,5 +37,23 @@
                 margin-bottom: calculateRem(4px);
             }
         }
+
+        .ibexa-input-text-wrapper__action-btn--calendar {
+            &:hover {
+                .ibexa-icon {
+                    fill: $ibexa-color-dark;
+                }
+            }
+
+            &:focus {
+                color: transparent;
+                border-color: transparent;
+                box-shadow: none;
+
+                .ibexa-icon {
+                    fill: $ibexa-color-dark;
+                }
+            }
+        }
     }
 }
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/inputs/input_date_time_picker.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/inputs/input_date_time_picker.html.twig
@@ -27,10 +27,13 @@
     {% endblock %}
     {% block actions %}
         {{ parent() }}
-        <div class="ibexa-input-text-wrapper__action-btn">
+        <button
+            type="button"
+            class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--calendar"
+        >
             <svg class="ibexa-icon ibexa-icon--small">
                 <use xlink:href="{{ ibexa_icon_path('date') }}"></use>
             </svg>
-        </div>
+        </button>
     {% endblock %}
 {% endembed %}