Merge pull request #1675 from ushahidi/date_picker_fix

Date picker fix
ushahidi · Jun 7, 2021 · d3e91d2 · d3e91d2
2 parents 5380713 + 8108869
commit d3e91d2
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 26 deletions.
diff --git a/app/main/posts/modify/post-datetime-value.html b/app/main/posts/modify/post-datetime-value.html
@@ -1,5 +1,5 @@
 <div>
-  <div class="form-field date time">
+  <div class="form-field">
     <div class="input-with-icon">
       <svg class="iconic" role="img">
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/iconic-sprite.svg#calendar"></use>

diff --git a/app/main/posts/modify/post-value-edit.html b/app/main/posts/modify/post-value-edit.html
@@ -67,8 +67,6 @@
                 'error': form['values_' + attribute.id].$invalid && form['values_' + attribute.id].$dirty,
                 'success': ! form['values_' + attribute.id].$invalid && form['values_' + attribute.id].$dirty,
                 'required': attribute.required,
-                'date' : isDate(attribute),
-                'date time' : isDateTime(attribute),
                 'location' : attribute.input === 'location'
             }"
         >

diff --git a/app/main/posts/views/filters/filter-date.directive.js b/app/main/posts/views/filters/filter-date.directive.js
@@ -13,7 +13,29 @@ function DateSelectDirective() {
     };
 }
 
-DateSelectController.$inject = ['$scope', 'Flatpickr'];
-function DateSelectController($scope, Flatpickr) {
-    Flatpickr('.flatpickr', {});
+DateSelectController.$inject = ['$scope', '$rootScope','Flatpickr'];
+function DateSelectController($scope, $rootScope, Flatpickr) {
+    let pickers = Flatpickr('.flatpickr', {});
+
+    function pauseTrap() {
+        $rootScope.$broadcast('event:pauseTrap', true)
+    }
+
+    function unPauseTrap () {
+        $rootScope.$broadcast('event:pauseTrap', false)
+    }
+
+    // There are multiple pickers because of start/end-date in filters
+    pickers.forEach(picker => {
+        if (picker.config) {
+            if (picker.config.onOpen) {
+                picker.config.onOpen.push(pauseTrap);
+            }
+            if (picker.config.onClose) {
+                picker.config.onClose.push(unPauseTrap);
+            }
+        }
+    });
+
+
 }
diff --git a/app/main/posts/views/filters/filter-posts.directive.js b/app/main/posts/views/filters/filter-posts.directive.js
@@ -16,12 +16,16 @@ function FilterPostsDirective() {
     };
 }
 
-FilterPostsController.$inject = ['$scope', 'PostFilters', '$state', '$document', '$element', 'FocusTrap'];
-function FilterPostsController($scope, PostFilters, $state, $document, $element, FocusTrap) {
+FilterPostsController.$inject = ['$rootScope', '$scope', 'PostFilters', '$state', '$document', '$element', 'FocusTrap'];
+function FilterPostsController($rootScope, $scope, PostFilters, $state, $document, $element, FocusTrap) {
     function dropdownContainerLink() {
         let container = document.querySelector('#dropdown-window');
         let trap = FocusTrap.createFocusTrap('#dropdown-window');
 
+        $rootScope.$on('event:pauseTrap', function(event, value) {
+            value ? trap.pause() : trap.unpause();
+        });
+
         function watchClassAttribute(mutations) {
             mutations.forEach(function (mutation) {
                 if (mutation.type === 'attributes') {
@@ -56,20 +60,14 @@ function FilterPostsController($scope, PostFilters, $state, $document, $element,
     activate();
 
     function activate() {
-        // Watch all click events on the page
-        $document.on('click', handleDocumentClick);
-
-        $scope.$on('$destroy', () => {
-            $document.off('click', handleDocumentClick);
-        });
-
         $scope.$watch('status.isopen', (value) => {
             if (value) {
                 $scope.onOpen();
             } else {
                 $scope.onClose();
             }
         });
+
     }
 
     function applyFilters() {
@@ -91,17 +89,6 @@ function FilterPostsController($scope, PostFilters, $state, $document, $element,
         $scope.status.isopen = false;
     }
 
-    // Close the dropdown for any clicks outside of the filters
-    function handleDocumentClick(evt) {
-        // If the click was inside the directive
-        if (evt && $element && $element[0].contains(evt.target)) {
-            // Ignore it
-            return;
-        }
-
-        // Otherwise close the dropdown
-        $scope.$apply(hideDropdown);
-    }
     function toggleDropdown(event) {
         switch (event.keyCode) {
             case 27: $scope.hideDropdown();