Fixing select2 smaller version styles and focus/blur behavior

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;