Fixed selectunique field. Now more reliable when adding/removing list tiems.

themes/grav/app/forms/fields/selectunique.js

@@ -6,14 +6,16 @@ const Data = {};
 export default class SelectUniqueField {
 
     constructor(options) {
+        const body = $('body');
         this.items = $();
         this.options = Object.assign({}, this.defaults, options);
 
-        $('[data-select-observe]').each((index, element) => this.addSelect(element)).last().trigger('change');
-        $('body').on('mutation._grav', this._onAddedNodes.bind(this));
+        $('[data-select-observe]').each((index, element) => this.addSelect(element)).last().trigger('change', { load: true });
+        body.on('mutation._grav', this._onAddedNodes.bind(this));
+        body.on('mutation_removed._grav', this._onRemovedNodes.bind(this));
     }
 
-    _onAddedNodes(event, target/* , record, instance */) {
+    _onAddedNodes(event, target, record, instance) {
         let fields = $(target).find('[data-select-observe]');
         if (!fields.length) { return; }
 
@@ -25,6 +27,26 @@ export default class SelectUniqueField {
         });
     }
 
+    _onRemovedNodes(event, data/* , instance */) {
+        const target = $(data.target);
+        const holder = target.data('collectionHolder');
+        if (!holder) { return false; }
+
+        const node = $(data.mutation.removedNodes);
+        const value = node.find('[data-select-observe]').val();
+        if (value) {
+            Data[holder].state[value] = value;
+        }
+
+        target.find('[data-select-observe]').each((index, field) => {
+            field = $(field);
+
+            if (field.val() !== value) {
+                this.updateOptions(field);
+            }
+        });
+    }
+
     addSelect(element) {
         this.items = this.items.add(element);
         element = $(element);
@@ -46,6 +68,26 @@ export default class SelectUniqueField {
             Data[holder].state = Object.assign({}, data);
         }
 
+        this.updateOptions(element);
+
+        element.data('originalValue', value);
+        element.on('change', (event, extras) => {
+            const target = $(event.currentTarget);
+            if (target.data('dummyChange')) {
+                target.data('dummyChange', false);
+                return false;
+            }
+
+            this.refreshOptions(target, extras && extras.load ? null : element.data('originalValue'));
+            element.data('originalValue', target.val());
+        });
+    }
+
+    updateOptions(element) {
+        element = $(element);
+        const value = element.attr('value');
+        const holder = element.closest('[data-collection-holder]').data('collectionHolder');
+
         forIn(Data[holder].state, (v, k) => {
             const selected = k === value ? 'selected="selected"' : '';
 
@@ -65,24 +107,13 @@ export default class SelectUniqueField {
                 delete Data[holder].state[value];
             }
         });
-
-        element.data('originalValue', value);
-        element.on('change', (event) => {
-            const target = $(event.currentTarget);
-            if (target.data('dummyChange')) {
-                target.data('dummyChange', false);
-                return false;
-            }
-
-            this.refreshOptions(target, element.data('originalValue'));
-            element.data('originalValue', target.val());
-        });
     }
 
     refreshOptions(element, originalValue) {
         const value = element.val();
         const holder = element.closest('[data-collection-holder]').data('collectionHolder');
         delete Data[holder].state[value];
+
         if (originalValue && Data[holder].original[originalValue]) {
             Data[holder].state[originalValue] = Data[holder].original[originalValue];
         }
@@ -96,20 +127,23 @@ export default class SelectUniqueField {
 
             if (select.get(0).selectize) {
                 const selectize = select.data('selectize');
-                selectize.clearOptions();
 
-                if (selectedValue) {
-                    selectize.addOption({
-                        value: selectedValue,
-                        text: Data[holder].original[selectedValue] || selectedValue
+                if (selectize) {
+                    selectize.clearOptions();
+
+                    if (selectedValue) {
+                        selectize.addOption({
+                            value: selectedValue,
+                            text: Data[holder].original[selectedValue] || selectedValue
+                        });
+                    }
+
+                    forIn(Data[holder].state, (v, k) => {
+                        selectize.addOption({ value: k, text: v });
                     });
+
+                    selectize.setValue(selectedValue, true);
                 }
-
-                forIn(Data[holder].state, (v, k) => {
-                    selectize.addOption({ value: k, text: v });
-                });
-
-                selectize.setValue(selectedValue, true);
             } else {
                 select.empty();
                 forIn(Data[holder].state, (v, k) => {