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) {
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);
}
}

View File

@ -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);
}
});
},

View File

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