From bca7f7bbf4d60d4627f61e2a5a2128e5111091ef Mon Sep 17 00:00:00 2001
From: Thomas Walter <TomOne@users.noreply.github.com>
Date: Tue, 26 Sep 2017 05:34:54 +0200
Subject: [PATCH] Fix [required] fields not working in Microsoft Edge with
 Selectize.js (#1222)

---
 themes/grav/app/forms/fields/filepicker.js    |  1 +
 themes/grav/app/forms/fields/selectize.js     |  5 +++-
 themes/grav/app/pages/filter.js               |  3 +-
 .../grav/app/utils/selectize-required-fix.js  | 28 +++++++++++++++++++
 4 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 themes/grav/app/utils/selectize-required-fix.js

diff --git a/themes/grav/app/forms/fields/filepicker.js b/themes/grav/app/forms/fields/filepicker.js
index 4bf444da..521ec848 100644
--- a/themes/grav/app/forms/fields/filepicker.js
+++ b/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',
diff --git a/themes/grav/app/forms/fields/selectize.js b/themes/grav/app/forms/fields/selectize.js
index 29e223f0..be257f14 100644
--- a/themes/grav/app/forms/fields/selectize.js
+++ b/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'));
     }
diff --git a/themes/grav/app/pages/filter.js b/themes/grav/app/pages/filter.js
index 1fe24d82..d06446ac 100644
--- a/themes/grav/app/pages/filter.js
+++ b/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']
         });
     }
 }
diff --git a/themes/grav/app/utils/selectize-required-fix.js b/themes/grav/app/utils/selectize-required-fix.js
new file mode 100644
index 00000000..c0a5bedf
--- /dev/null
+++ b/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');
+        }
+    };
+});