othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing select2 re-rendering issues

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-03-31 12:07:38 -03:00
parent 25671c4e77
commit 4e54b21dd4
2 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Packages/ohif-core/client/components/base/mixins/schemaData.js
View File

@ -100,7 +100,7 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
// Fill the items if it's an array schema
if (!data.items && Array.isArray(currentSchema.allowedValues)) {
data.items = new ReactiveVar();
data.items = data.items instanceof ReactiveVar ? data.items : new ReactiveVar();
Tracker.autorun(() => {
const schemaDefs = getCurrentSchemaDefs(parent, data.pathKey);

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

@ -1,5 +1,6 @@
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Tracker } from 'meteor/tracker';
import { _ } from 'meteor/underscore';
import { $ } from 'meteor/jquery';
import { OHIF } from 'meteor/ohif:core';
@ -53,27 +54,54 @@ OHIF.mixins.select2 = new OHIF.Mixin({
const instance = Template.instance();
const component = instance.component;
// Apply the select2 to the component
component.$element.select2(instance.data.options);
// Store the select2 instance to allow its further destruction
component.select2Instance = component.$element.data('select2');
// Get the focusable elements
const elements = [];
elements.push(component.$element[0]);
elements.push(component.$element.nextAll('.select2:first').find('.select2-selection')[0]);
// Attach focus and blur handlers to focusable elements
$(elements).on('focus', event => {
if (event.target === event.currentTarget) {
// Show the state message on elements focus
component.toggleMessage(true);
// Destroy and re-create the select2 instance
const rebuildSelect2 = () => {
// Destroy the select2 instance if exists and re-create it
if (component.select2Instance) {
component.select2Instance.destroy();
}
}).on('blur', event => {
if (event.target === event.currentTarget) {
// Hide the state message on elements blur
component.toggleMessage(false);
// Apply the select2 to the component
component.$element.select2(instance.data.options);
// Store the select2 instance to allow its further destruction
component.select2Instance = component.$element.data('select2');
// Get the focusable elements
const elements = [];
elements.push(component.$element[0]);
elements.push(component.$element.nextAll('.select2:first').find('.select2-selection')[0]);
// Attach focus and blur handlers to focusable elements
$(elements).on('focus', event => {
if (event.target === event.currentTarget) {
// Show the state message on elements focus
component.toggleMessage(true);
}
}).on('blur', event => {
if (event.target === event.currentTarget) {
// Hide the state message on elements blur
component.toggleMessage(false);
}
});
};
instance.autorun(() => {
// Run this computation every time the reactive items suffer any changes
const isReactive = instance.data.items instanceof ReactiveVar;
if (isReactive) {
instance.data.items.dep.depend();
}
if (isReactive) {
// Keep the current value of the component
const currentValue = component.value();
Tracker.afterFlush(() => {
rebuildSelect2();
component.value(currentValue);
});
} else {
rebuildSelect2();
}
});
},