Fixing event propagation issues on components mixins

This commit is contained in:
Bruno Alves de Faria 2017-02-10 08:43:37 -02:00
parent 4107ed1dfa
commit 1582ba3ad0
3 changed files with 24 additions and 29 deletions

View File

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

View File

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

View File

@ -1,6 +1,7 @@
import { OHIF } from 'meteor/ohif:core'; import { OHIF } from 'meteor/ohif:core';
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating'; import { Template } from 'meteor/templating';
import { Tracker } from 'meteor/tracker';
import { ReactiveVar } from 'meteor/reactive-var'; import { ReactiveVar } from 'meteor/reactive-var';
import { _ } from 'meteor/underscore'; import { _ } from 'meteor/underscore';
import { $ } from 'meteor/jquery'; import { $ } from 'meteor/jquery';
@ -24,7 +25,7 @@ Template.selectTree.onCreated(() => {
const leaves = instance.data.component.getLeaves(); const leaves = instance.data.component.getLeaves();
// Generate an object with encoded keys from the tree leaves // Generate an object with encoded keys from the tree leaves
leavesObject = {}; const leavesObject = {};
_.each(leaves, leaf => { _.each(leaves, leaf => {
leavesObject[OHIF.string.encodeId(leaf.value)] = leaf; leavesObject[OHIF.string.encodeId(leaf.value)] = leaf;
}); });
@ -273,7 +274,7 @@ Template.selectTree.events({
instance.setSelected(false); instance.setSelected(false);
// Get the index of the breadcrumb's clicked option // Get the index of the breadcrumb's clicked option
const index = $(event.currentTarget).attr('data-index') | 0; const index = parseInt($(event.currentTarget).attr('data-index'));
// Set the current instance // Set the current instance
let currentInstance = instance.component.parent.templateInstance; let currentInstance = instance.component.parent.templateInstance;
@ -323,7 +324,9 @@ Template.selectTree.helpers({
const sortedItems = []; const sortedItems = [];
_.each(begin, (item, index) => { _.each(begin, (item, index) => {
sortedItems.push(item); sortedItems.push(item);
items[index] && sortedItems.push(items[index]); if (items[index]) {
sortedItems.push(items[index]);
}
}); });
items = sortedItems; items = sortedItems;
} }