From 7f29cbe13cd464affef9072e6446fca8224175b3 Mon Sep 17 00:00:00 2001
From: Dan Harrin <danharrin2409@gmail.com>
Date: Mon, 1 Jul 2019 16:04:15 +0100
Subject: [PATCH] Fix support for custom Select2 options via the AJAX framework
 (#4414)

Fixes #4413. Credit to @DanHarrin
---
 modules/system/assets/ui/docs/select.md | 19 ++++++++++++++++++-
 modules/system/assets/ui/js/select.js   | 18 ++++++++++++++++++
 modules/system/assets/ui/storm-min.js   |  2 +-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/modules/system/assets/ui/docs/select.md b/modules/system/assets/ui/docs/select.md
index e8f18c6bd..2b13f08d7 100644
--- a/modules/system/assets/ui/docs/select.md
+++ b/modules/system/assets/ui/docs/select.md
@@ -68,11 +68,28 @@ Use the `data-handler` attribute to source the select options from an AJAX handl
     data-minimum-input-length="2"
     data-ajax--delay="300"
     data-request-data="foo: 'bar'"
-    ></select>
+></select>
 ```
 
 The AJAX handler should return results as an array.
 
+```php
+public function onGetOptions()
+{
+    $results = [
+        [
+            'id' => 1,
+            'text' => 'Foobar',
+        ],
+        ...
+    ];
+
+    return ['result' => $results];
+}
+```
+
+Due to the fact that JavaScript reorders numeric keys when interpreting the JSON data received by the AJAX handler, we suggest the method above for defining `results`. Support for the original `results` array format is however retained to ensure backwards compatibility.
+
 ```php
 public function onGetOptions()
 {
diff --git a/modules/system/assets/ui/js/select.js b/modules/system/assets/ui/js/select.js
index 6b4d4b2ea..86a3afe86 100644
--- a/modules/system/assets/ui/js/select.js
+++ b/modules/system/assets/ui/js/select.js
@@ -86,7 +86,25 @@
 
                         return $request
                     },
+                    processResults: function (data, params) {
+                        var results = data.result;
+                        var options = [];
 
+                        for (var i in results) {
+                            if (results.hasOwnProperty(i)) {
+                                var isObject = i != null && i.constructor.name === 'Object';
+                                
+                                options.push({
+                                    id: isObject ? results[i].id : i,
+                                    text: isObject ? results[i].text : results[i],
+                                });
+                            };
+                        };
+
+                        return {
+                            results: options,
+                        };
+                    },
                     dataType: 'json'
                 }
             }
diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js
index e06d6ccf8..8c58ca1b9 100644
--- a/modules/system/assets/ui/storm-min.js
+++ b/modules/system/assets/ui/storm-min.js
@@ -3493,7 +3493,7 @@ if($element.hasClass('select-hide-selected')){extraOptions.dropdownCssClass+=' s
 var source=$element.data('handler');if(source){extraOptions.ajax={transport:function(params,success,failure){var $request=$element.request(source,{data:params.data})
 $request.done(success)
 $request.fail(failure)
-return $request},dataType:'json'}}
+return $request},processResults:function(data,params){var results=data.result;var options=[];for(var i in results){if(results.hasOwnProperty(i)){var isObject=i!=null&&i.constructor.name==='Object';options.push({id:isObject?results[i].id:i,text:isObject?results[i].text:results[i],});};};return{results:options,};},dataType:'json'}}
 var separators=$element.data('token-separators')
 if(separators){extraOptions.tags=true
 extraOptions.tokenSeparators=separators.split('|')