Fixing event propagation issues on components mixins
This commit is contained in:
parent
4107ed1dfa
commit
1582ba3ad0
@ -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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user