Fix [required] fields not working in Microsoft Edge with Selectize.js (#1222)

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

@@ -96,6 +96,7 @@ export default class FilePickerField {
         };
 
         field.selectize({
+            plugins: ['required-fix'],
             valueField: 'name',
             labelField: 'name',
             searchField: 'name',

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

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import 'selectize';
+import '../../utils/selectize-required-fix';
 
 export default class SelectizeField {
     constructor(options = {}) {
@@ -19,7 +20,9 @@ export default class SelectizeField {
         let field = (isInput ? element : element.find('input, select'));
 
         if (!field.length || field.get(0).selectize) { return; }
-        field.selectize(data);
+        field.selectize($.extend({}, data, {
+            plugins: ['required-fix']
+        }));
 
         this.elements.push(field.data('selectize'));
     }

themes/grav/app/pages/filter.js

@@ -4,6 +4,7 @@ import request from '../utils/request';
 import debounce from 'debounce';
 import { Instance as pagesTree } from './tree';
 import 'selectize';
+import '../utils/selectize-required-fix.js';
 import '../utils/storage';
 
 /* @formatter:off */
@@ -138,7 +139,7 @@ export default class PagesFilter {
             optgroupLabelField: 'name',
             optgroupValueField: 'id',
             optgroupOrder: this.labels.map((item) => item.id),
-            plugins: ['optgroup_columns']
+            plugins: ['optgroup_columns', 'required-fix']
         });
     }
 }

themes/grav/app/utils/selectize-required-fix.js

@@ -0,0 +1,28 @@
+/**
+ * This is a plugin to override the `.refreshValidityState` method of
+ * the Selectize library (https://selectize.github.io/selectize.js/).
+ * The library is not maintained anymore (as of 2017-09-13) and contains
+ * a bug which causes Microsoft Edge to not work with selectized [required]
+ * form fields. This plugin should be removed if
+ * https://github.com/selectize/selectize.js/pull/1320 is ever merged
+ * and a new version of Selectize gets released.
+ */
+
+import Selectize from 'selectize';
+
+Selectize.define('required-fix', function(options) {
+    this.refreshValidityState = () => {
+        if (!this.isRequired) return false;
+
+        let invalid = !this.items.length;
+        this.isInvalid = invalid;
+
+        if (invalid) {
+            this.$control_input.attr('required', '');
+            this.$input.removeAttr('required');
+        } else {
+            this.$control_input.removeAttr('required');
+            this.$input.attr('required');
+        }
+    };
+});