From 87de314c182a8e0ebd69cefa7ea188c4623c6fc5 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Mon, 29 Jan 2018 20:18:14 -0500
Subject: [PATCH 01/13] Adds option to query remote source for data

---
 assets/js/src/form/fields/selection.jsx | 38 +++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index 54f3fcde4c..9f36f57887 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -55,7 +55,7 @@ define([
         return;
       }
 
-      const select2 = jQuery(`#${this.refs.select.id}`).select2({
+      let select2Options = {
         width: (this.props.width || ''),
         templateResult: function (item) {
           if (item.element && item.element.selected) {
@@ -65,7 +65,41 @@ define([
           }
           return item.text;
         },
-      });
+      };
+
+      const remoteQuery = this.props.field.remoteQuery || null;
+      if (remoteQuery) {
+        select2Options = Object.assign(select2Options, {
+          ajax: {
+            url: window.ajaxurl,
+            type: 'POST',
+            dataType: 'json',
+            data: function (params) {
+              return {
+                action: 'mailpoet',
+                api_version: window.mailpoet_api_version,
+                token: window.mailpoet_token,
+                endpoint: remoteQuery.endpoint,
+                method: remoteQuery.method,
+                data: Object.assign(
+                  remoteQuery.data,
+                  { query: params.term }
+                ),
+              };
+            },
+            processResults: function (response) {
+              return {
+                results: response.data.map(item => (
+                  { id: item.id || item.value, text: item.name || item.text }
+                )),
+              };
+            },
+          },
+          minimumInputLength: remoteQuery.minimumInputLength || 2,
+        });
+      }
+
+      const select2 = jQuery(`#${this.refs.select.id}`).select2(select2Options);
 
       let hasRemoved = false;
       select2.on('select2:unselecting', () => {

From fef8017134a8e5e542bb0c8abde3aee481b9f829 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Tue, 30 Jan 2018 21:19:19 -0500
Subject: [PATCH 02/13] Loads select items before render

---
 assets/js/src/form/fields/selection.jsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index 9f36f57887..4cd06a42ec 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -12,13 +12,9 @@ define([
   const Selection = React.createClass({
     getInitialState: function () {
       return {
-        items: [],
         select2: false,
       };
     },
-    componentWillMount: function () {
-      this.loadCachedItems();
-    },
     allowMultipleValues: function () {
       return (this.props.field.multiple === true);
     },
@@ -130,7 +126,7 @@ define([
       }
       return null;
     },
-    loadCachedItems: function () {
+    loadItems: function () {
       let items;
       if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
         items = window[`mailpoet_${this.props.field.endpoint}`];
@@ -142,11 +138,9 @@ define([
         if (this.props.field.filter !== undefined) {
           items = items.filter(this.props.field.filter);
         }
-
-        this.setState({
-          items: items,
-        });
       }
+
+      return items;
     },
     handleChange: function (e) {
       let value;
@@ -201,7 +195,8 @@ define([
       return undefined;
     },
     render: function () {
-      const options = this.state.items.map((item, index) => {
+      const items = this.loadItems(this.props.field);
+      const options = items.map((item, index) => {
         const label = this.getLabel(item);
         const searchLabel = this.getSearchLabel(item);
         const value = this.getValue(item);

From a0667adace3bdbbb8b9df263dcff1f14bdef75f7 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Wed, 31 Jan 2018 17:48:17 -0500
Subject: [PATCH 03/13] Prevents component from rerendering when Select2 is
 initialized

---
 assets/js/src/form/fields/selection.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index 4cd06a42ec..3e76ad4066 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -44,6 +44,7 @@ define([
     destroySelect2: function () {
       if (this.isSelect2Initialized()) {
         jQuery(`#${this.refs.select.id}`).select2('destroy');
+        this.state.select2 = false;
       }
     },
     setupSelect2: function () {
@@ -110,7 +111,7 @@ define([
 
       select2.on('change', this.handleChange);
 
-      this.setState({ select2: true });
+      this.state.select2 = true;
     },
     getSelectedValues: function () {
       if (this.props.field.selected !== undefined) {

From b88dec06d94f22ef854b877a14b0c4c73e329f61 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Wed, 31 Jan 2018 17:52:04 -0500
Subject: [PATCH 04/13] Adds getter for field ID

---
 assets/js/src/form/fields/selection.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index 3e76ad4066..9a13a22c2f 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -41,6 +41,10 @@ define([
         this.destroySelect2();
       }
     },
+    getFieldId: function (data) {
+      const props = data || this.props;
+      return props.field.id || props.field.name;
+    },
     destroySelect2: function () {
       if (this.isSelect2Initialized()) {
         jQuery(`#${this.refs.select.id}`).select2('destroy');
@@ -215,7 +219,7 @@ define([
 
       return (
         <select
-          id={this.props.field.id || this.props.field.name}
+          id={this.getFieldId()}
           ref="select"
           disabled={this.props.field.disabled}
           data-placeholder={this.props.field.placeholder}

From 63000c48c45f37b9dd9db9ca6503a0376b12950d Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Wed, 31 Jan 2018 17:53:17 -0500
Subject: [PATCH 05/13] Allows reinitializing Select2 upon component rerender

---
 assets/js/src/form/fields/selection.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index 9a13a22c2f..09cd19d928 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -27,14 +27,20 @@ define([
       }
     },
     componentDidUpdate: function (prevProps) {
-      if (
-        (this.props.item !== undefined && prevProps.item !== undefined)
+      if ((this.props.item !== undefined && prevProps.item !== undefined)
         && (this.props.item.id !== prevProps.item.id)
       ) {
         jQuery(`#${this.refs.select.id}`)
           .val(this.getSelectedValues())
           .trigger('change');
       }
+
+      if (this.isSelect2Initialized() &&
+        (this.getFieldId(this.props) !== this.getFieldId(prevProps)) &&
+        this.props.field.resetSelect2OnUpdate !== undefined
+      ) {
+        this.resetSelect2();
+      }
     },
     componentWillUnmount: function () {
       if (this.allowMultipleValues() || this.props.field.forceSelect2) {
@@ -45,6 +51,10 @@ define([
       const props = data || this.props;
       return props.field.id || props.field.name;
     },
+    resetSelect2: function () {
+      this.destroySelect2();
+      this.setupSelect2();
+    },
     destroySelect2: function () {
       if (this.isSelect2Initialized()) {
         jQuery(`#${this.refs.select.id}`).select2('destroy');

From bb76a8c6aa0ff5d76e962894f2710e70e5823086 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Wed, 31 Jan 2018 17:53:50 -0500
Subject: [PATCH 06/13] Cleans up DOM elements manually added by Select2 and
 not tracked by React

---
 assets/js/src/form/fields/selection.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index 09cd19d928..b7c9f1b9af 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -57,7 +57,7 @@ define([
     },
     destroySelect2: function () {
       if (this.isSelect2Initialized()) {
-        jQuery(`#${this.refs.select.id}`).select2('destroy');
+        jQuery(`#${this.refs.select.id}`).select2('destroy').find('option:not(.default)').remove();
         this.state.select2 = false;
       }
     },
@@ -206,7 +206,7 @@ define([
       // For single selects only, in order for the placeholder value to appear,
       // we must have a blank <option> as the first option in the <select> control.
       if (this.allowMultipleValues()) return undefined;
-      if (this.props.field.placeholder) return (<option />);
+      if (this.props.field.placeholder) return (<option className="default" />);
       return undefined;
     },
     render: function () {
@@ -219,6 +219,7 @@ define([
         return (
           <option
             key={`option-${index}`}
+            className="default"
             value={value}
             title={searchLabel}
           >

From f467479438b54bc0b78427cf3af11bbbdbd1e0c3 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Wed, 31 Jan 2018 18:06:12 -0500
Subject: [PATCH 07/13] Allows overriding Select2 options

---
 assets/js/src/form/fields/selection.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index b7c9f1b9af..f24c3da1ff 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -110,6 +110,10 @@ define([
         });
       }
 
+      if (this.props.field.extendSelect2Options !== undefined) {
+        select2Options = Object.assign(select2Options, this.props.field.extendSelect2Options);
+      }
+
       const select2 = jQuery(`#${this.refs.select.id}`).select2(select2Options);
 
       let hasRemoved = false;

From 874a37303ae2af9363826b77f3152c76ee2e48ca Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Wed, 31 Jan 2018 18:08:43 -0500
Subject: [PATCH 08/13] Exposes Selection form field

---
 webpack.config.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/webpack.config.js b/webpack.config.js
index d894cd2491..9e1fed973c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -105,6 +105,10 @@ var baseConfig = {
         test: /form.jsx/i,
         loader: 'expose-loader?' + globalPrefix + '.Form!babel-loader',
       },
+      {
+        include: path.resolve(__dirname, 'assets/js/src/form/fields/selection.jsx'),
+        loader: 'expose-loader?' + globalPrefix + '.FormFieldSelection!babel-loader',
+      },
       {
         include: path.resolve(__dirname, 'assets/js/src/newsletters/badges/stats.jsx'),
         loader: 'expose-loader?' + globalPrefix + '.StatsBadge!babel-loader',

From aba75849e1a8a01d99cc4024b1f7cace6fae4b42 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Wed, 31 Jan 2018 20:01:19 -0500
Subject: [PATCH 09/13] Standardizes placeholder and border colors for Select2
 elements

---
 assets/css/src/common.styl | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/assets/css/src/common.styl b/assets/css/src/common.styl
index 1717b5222e..7622b95d01 100644
--- a/assets/css/src/common.styl
+++ b/assets/css/src/common.styl
@@ -28,6 +28,20 @@ a:focus
 .select2-container
   width: 25em !important
 
+placeholder-color = #999 /* default Select2 placeholder color for single dropdown */
+
+input.select2-search__field::-webkit-input-placeholder
+  color: placeholder-color
+input.select2-search__field:-moz-placeholder
+  color: placeholder-color
+input.select2-search__field::-moz-placeholder
+ color: placeholder-color
+input.select2-search__field:-ms-input-placeholder
+  color: placeholder-color
+
+.select2-container--default.select2-container--focus .select2-selection--multiple
+  border: 1px solid #aaa; /* default Select2 border for single dropdown */
+
 // textareas
 textarea.regular-text
   width: 25em !important

From 80a3bbd030c31d4a530942438a3aebc140de5305 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Thu, 1 Feb 2018 17:46:26 -0500
Subject: [PATCH 10/13] Changes method name to get selection items

---
 assets/js/src/form/fields/selection.jsx         | 4 ++--
 assets/js/src/newsletters/send/notification.jsx | 2 +-
 assets/js/src/newsletters/send/standard.jsx     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index f24c3da1ff..ff24c87264 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -145,7 +145,7 @@ define([
       }
       return null;
     },
-    loadItems: function () {
+    getItems: function () {
       let items;
       if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
         items = window[`mailpoet_${this.props.field.endpoint}`];
@@ -214,7 +214,7 @@ define([
       return undefined;
     },
     render: function () {
-      const items = this.loadItems(this.props.field);
+      const items = this.getItems(this.props.field);
       const options = items.map((item, index) => {
         const label = this.getLabel(item);
         const searchLabel = this.getSearchLabel(item);
diff --git a/assets/js/src/newsletters/send/notification.jsx b/assets/js/src/newsletters/send/notification.jsx
index d2be642377..3a04d8ef44 100644
--- a/assets/js/src/newsletters/send/notification.jsx
+++ b/assets/js/src/newsletters/send/notification.jsx
@@ -45,7 +45,7 @@ define(
           return `${segment.name} (${parseInt(segment.subscribers, 10).toLocaleString()})`;
         },
         transformChangedValue: function (segmentIds) {
-          const allSegments = this.state.items;
+          const allSegments = this.getItems();
           return _.map(segmentIds, id => _.find(allSegments, segment => segment.id === id));
         },
         validation: {
diff --git a/assets/js/src/newsletters/send/standard.jsx b/assets/js/src/newsletters/send/standard.jsx
index c086f2a318..e61dd9a839 100644
--- a/assets/js/src/newsletters/send/standard.jsx
+++ b/assets/js/src/newsletters/send/standard.jsx
@@ -351,7 +351,7 @@ define(
           return `${segment.name} (${parseInt(segment.subscribers, 10).toLocaleString()})`;
         },
         transformChangedValue: function (segmentIds) {
-          const allSegments = this.state.items;
+          const allSegments = this.getItems();
           return _.map(segmentIds, id => _.find(allSegments, segment => segment.id === id));
         },
         validation: {

From ae9f373cff0b3b9a1516630c49ff502d7c9332bd Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Thu, 1 Feb 2018 17:53:16 -0500
Subject: [PATCH 11/13] Removes state and updates method to test if Select2 is
 initialized

---
 assets/js/src/form/fields/selection.jsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index ff24c87264..656ac4d3c9 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -10,16 +10,11 @@ define([
   jQuery
 ) => {
   const Selection = React.createClass({
-    getInitialState: function () {
-      return {
-        select2: false,
-      };
-    },
     allowMultipleValues: function () {
       return (this.props.field.multiple === true);
     },
     isSelect2Initialized: function () {
-      return (this.state.select2 === true);
+      return (jQuery(`#${this.refs.select.id}`).hasClass('select2-hidden-accessible') === true)
     },
     componentDidMount: function () {
       if (this.allowMultipleValues() || this.props.field.forceSelect2) {
@@ -58,7 +53,6 @@ define([
     destroySelect2: function () {
       if (this.isSelect2Initialized()) {
         jQuery(`#${this.refs.select.id}`).select2('destroy').find('option:not(.default)').remove();
-        this.state.select2 = false;
       }
     },
     setupSelect2: function () {
@@ -128,8 +122,6 @@ define([
       });
 
       select2.on('change', this.handleChange);
-
-      this.state.select2 = true;
     },
     getSelectedValues: function () {
       if (this.props.field.selected !== undefined) {

From 9f9b44fd7e9e4af97fb5f7f56857d19696169125 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Thu, 1 Feb 2018 18:25:25 -0500
Subject: [PATCH 12/13] Adds a method that cleans up after Select2

---
 assets/js/src/form/fields/selection.jsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/assets/js/src/form/fields/selection.jsx b/assets/js/src/form/fields/selection.jsx
index 656ac4d3c9..e61f41a7a1 100644
--- a/assets/js/src/form/fields/selection.jsx
+++ b/assets/js/src/form/fields/selection.jsx
@@ -14,7 +14,7 @@ define([
       return (this.props.field.multiple === true);
     },
     isSelect2Initialized: function () {
-      return (jQuery(`#${this.refs.select.id}`).hasClass('select2-hidden-accessible') === true)
+      return (jQuery(`#${this.refs.select.id}`).hasClass('select2-hidden-accessible') === true);
     },
     componentDidMount: function () {
       if (this.allowMultipleValues() || this.props.field.forceSelect2) {
@@ -52,9 +52,21 @@ define([
     },
     destroySelect2: function () {
       if (this.isSelect2Initialized()) {
-        jQuery(`#${this.refs.select.id}`).select2('destroy').find('option:not(.default)').remove();
+        jQuery(`#${this.refs.select.id}`).select2('destroy');
+        this.cleanupAfterSelect2();
       }
     },
+    cleanupAfterSelect2: function () {
+      // remove DOM elements created by Select2 that are not tracked by React
+      jQuery(`#${this.refs.select.id}`)
+        .find('option:not(.default)')
+        .remove();
+
+      // unbind events (https://select2.org/programmatic-control/methods#event-unbinding)
+      jQuery(`#${this.refs.select.id}`)
+        .off('select2:unselecting')
+        .off('select2:opening');
+    },
     setupSelect2: function () {
       if (this.isSelect2Initialized()) {
         return;

From f4ba45490d85440047854293c425e891277d9419 Mon Sep 17 00:00:00 2001
From: Vlad <site.github@mrcasual.com>
Date: Thu, 1 Feb 2018 18:27:57 -0500
Subject: [PATCH 13/13] Corrects identation

---
 assets/css/src/common.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/css/src/common.styl b/assets/css/src/common.styl
index 7622b95d01..622e6906ce 100644
--- a/assets/css/src/common.styl
+++ b/assets/css/src/common.styl
@@ -35,7 +35,7 @@ input.select2-search__field::-webkit-input-placeholder
 input.select2-search__field:-moz-placeholder
   color: placeholder-color
 input.select2-search__field::-moz-placeholder
- color: placeholder-color
+  color: placeholder-color
 input.select2-search__field:-ms-input-placeholder
   color: placeholder-color