Fixing select2 smaller version styles and focus/blur behavior

LesionTracker/.meteor/packages

@@ -60,7 +60,6 @@ anti:gagarin@=0.4.11
 check@1.2.4
 aldeed:template-extension@4.0.0
 zuuk:stale-session
-gilbertwat:bootstrap3-daterangepicker
 email@1.1.18
 peppelg:bootstrap-3-modal
 simple:reactive-method

OHIFViewer/.meteor/versions

@@ -22,6 +22,7 @@ caching-html-compiler@1.0.7
 callback-hook@1.0.10
 check@1.2.4
 coffeescript@1.11.1_4
+dangrossman:bootstrap-daterangepicker@2.1.13
 ddp@1.2.5
 ddp-client@1.3.2
 ddp-common@1.2.8
@@ -35,7 +36,6 @@ ejson@1.0.13
 fastclick@1.0.13
 fortawesome:fontawesome@4.7.0
 geojson-utils@1.0.10
-gilbertwat:bootstrap3-daterangepicker@1.3.21_1
 hot-code-push@1.0.4
 html-tools@1.0.11
 htmljs@1.0.11

Packages/ohif-core/client/components/base/mixins/group.js

@@ -113,7 +113,8 @@ OHIF.mixins.group = new OHIF.Mixin({
                 }
 
                 // Reset the validation
-                component.schema.resetValidation();
+                const schema = component.isForm ? component.schema : component.getForm().schema;
+                schema.resetValidation();
 
                 // Validate the component itself if it has a key
                 if (instance.data.pathKey && !validateSelf()) {

Packages/ohif-core/client/components/base/mixins/select2.js

@@ -17,6 +17,13 @@ OHIF.mixins.select2 = new OHIF.Mixin({
             // Set the custom focus flag
             instance.component.isCustomFocus = true;
 
+            // Utility function to get the dropdown jQuery element
+            instance.getDropdownContainerElement = () => {
+                const $select2 = instance.component.$element.nextAll('.select2:first');
+                const containerId = $select2.find('.select2-selection').attr('aria-owns');
+                return $(`#${containerId}`).closest('.select2-container');
+            };
+
             // Check if this select will include a placeholder
             const placeholder = instance.data.options && instance.data.options.placeholder;
             if (placeholder) {
@@ -69,8 +76,9 @@ OHIF.mixins.select2 = new OHIF.Mixin({
 
                 // Get the focusable elements
                 const elements = [];
+                const $select2 = component.$element.nextAll('.select2:first');
                 elements.push(component.$element[0]);
-                elements.push(component.$element.nextAll('.select2:first').find('.select2-selection')[0]);
+                elements.push($select2.find('.select2-selection')[0]);
 
                 // Attach focus and blur handlers to focusable elements
                 $(elements).on('focus', event => {
@@ -84,6 +92,19 @@ OHIF.mixins.select2 = new OHIF.Mixin({
                         component.toggleMessage(false);
                     }
                 });
+
+                // Redirect keydown events from input to the select2 selection handler
+                component.$element.on('keydown ', event => {
+                    event.preventDefault();
+                    $select2.find('.select2-selection').trigger(event);
+                });
+
+                // Keep focus on element if ESC was pressed
+                $select2.on('keydown ', event => {
+                    if (event.which === 27) {
+                        instance.component.$element.focus();
+                    }
+                });
             };
 
             instance.autorun(() => {
@@ -106,6 +127,27 @@ OHIF.mixins.select2 = new OHIF.Mixin({
             });
         },
 
+        events: {
+            // Focus element when selecting a value
+            'select2:select'(event, instance) {
+                instance.component.$element.focus();
+            },
+
+            // Focus the element when closing the dropdown container using ESC key
+            'select2:open'(event, instance) {
+                const { minimumResultsForSearch } = instance.data.options;
+                if (minimumResultsForSearch === Infinity || minimumResultsForSearch === -1) return;
+                const $container = instance.getDropdownContainerElement();
+                const $searchInput = $container.find('.select2-search__field');
+                $searchInput.on('keydown.focusOnEsc', event => {
+                    if (event.which === 27) {
+                        $searchInput.off('keydown.focusOnEsc');
+                        instance.component.$element.focus();
+                    }
+                });
+            }
+        },
+
         onDestroyed() {
             const instance = Template.instance();
             const component = instance.component;

Packages/ohif-design/styles/common/global.styl

@@ -54,6 +54,12 @@ label.form-group
     height: 20px
     width: 12px
 
+    &:after
+      font-size: 12px
+      height: 20px
+      line-height: 20px
+      width: 12px
+
 .center-table
   display: table
   margin-left: auto

Packages/ohif-study-list/package.js

@@ -25,7 +25,7 @@ Package.onUse(function(api) {
     // Note: MomentJS appears to be required for Bootstrap3 Datepicker, but not a dependency for some reason
     api.use('momentjs:moment');
 
-    api.use('gilbertwat:bootstrap3-daterangepicker');
+    api.use('dangrossman:bootstrap-daterangepicker@2.1.13');
 
     // Our custom packages
     api.use('ohif:design');