Fixing event propagation issues on components mixins

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

@@ -271,32 +271,22 @@ OHIF.mixins.formItem = new OHIF.Mixin({
 
             focus(event, instance) {
                 const component = instance.component;
-
-                // Stop here if it is an group
-                if (component.isGroup || component.isCustomFocus) {
-                    return;
+                const isGroupOrCustomFocus = component.isGroup || component.isCustomFocus;
+                const isSameTarget = event.target === event.currentTarget;
+                if (!isGroupOrCustomFocus && isSameTarget) {
+                    // Check for state messages and show it
+                    component.toggleMessage(true);
                 }
-
-                // Prevent event bubbling
-                event.stopPropagation();
-
-                // Check for state messages and show it
-                component.toggleMessage(true);
             },
 
             blur(event, instance) {
                 const component = instance.component;
-
-                // Stop here if it is an group
-                if (component.isGroup || component.isCustomFocus) {
-                    return;
+                const isGroupOrCustomFocus = component.isGroup || component.isCustomFocus;
+                const isSameTarget = event.target === event.currentTarget;
+                if (!isGroupOrCustomFocus && isSameTarget) {
+                    // Check for state messages and show it
+                    component.toggleMessage(false);
                 }
-
-                // Prevent event bubbling
-                event.stopPropagation();
-
-                // Hide state messages
-                component.toggleMessage(false);
             }
 
         }

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

@@ -65,13 +65,15 @@ OHIF.mixins.select2 = new OHIF.Mixin({
 
             // Attach focus and blur handlers to focusable elements
             $(elements).on('focus', event => {
-                event.stopPropagation();
-                // Show the state message on elements focus
-                component.toggleMessage(true);
+                if (event.target === event.currentTarget) {
+                    // Show the state message on elements focus
+                    component.toggleMessage(true);
+                }
             }).on('blur', event => {
-                event.stopPropagation();
-                // Hide the state message on elements blur
-                component.toggleMessage(false);
+                if (event.target === event.currentTarget) {
+                    // Hide the state message on elements blur
+                    component.toggleMessage(false);
+                }
             });
         },