From 22946dcf75472a488f5cbfe7e0a9e434539ccac2 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 19 Nov 2019 09:50:09 -0500
Subject: [PATCH] GUI: Better widget for editing input type select

---
 ext/afform/core/afform.php                         |  4 ++++
 ext/afform/gui/ang/afGuiEditor.css                 | 13 +++++++++++++
 ext/afform/gui/ang/afGuiEditor.js                  |  8 --------
 .../gui/ang/afGuiEditor/inputType/Select.html      | 14 +++++++++++++-
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/ext/afform/core/afform.php b/ext/afform/core/afform.php
index a2eebb33ee..4e1a8f5da2 100644
--- a/ext/afform/core/afform.php
+++ b/ext/afform/core/afform.php
@@ -333,6 +333,10 @@ function afform_civicrm_alterAngular($angular) {
           if (!empty($fieldInfo['options'])) {
             $fieldInfo['options'] = CRM_Utils_Array::makeNonAssociative($fieldInfo['options'], 'key', 'label');
           }
+          // Default placeholder for select inputs
+          if ($fieldInfo['input_type'] === 'Select') {
+            $fieldInfo['input_attrs'] = ($fieldInfo['input_attrs'] ?? []) + ['placeholder' => ts('Select')];
+          }
 
           $fieldDefn = $existingFieldDefn ? CRM_Utils_JS::getRawProps($existingFieldDefn) : [];
           foreach ($fieldInfo as $name => $prop) {
diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index ae9d26e0b7..e13a9e16be 100644
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -316,6 +316,19 @@
 #afGuiEditor .af-gui-field-input-type-radio label.radio input[type=radio] {
   margin: 0;
 }
+#afGuiEditor .af-gui-field-input-type-select .input-group-btn {
+  position: initial;
+}
+#afGuiEditor .af-gui-field-input-type-select .input-group .dropdown-toggle {
+  padding: 3px 11px;
+}
+#afGuiEditor .af-gui-field-input-type-select .input-group .dropdown-menu {
+  width: 100%;
+  right: 0;
+}
+#afGuiEditor .af-gui-field-input-type-select .input-group .dropdown-menu a {
+  cursor: default;
+}
 
 #afGuiEditor .af-gui-text-h1 {
   font-weight: bolder;
diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index e8e18cd928..de6518bffb 100644
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -534,14 +534,6 @@
           return $scope.getDefn().options || ($scope.getProp('input_type') === 'CheckBox' ? null : yesNo);
         };
 
-        $scope.select2Options = function() {
-          return {
-            results: _.transform($scope.getOptions(), function(result, opt) {
-              result.push({id: opt.key, text: opt.label});
-            }, [])
-          };
-        };
-
         $scope.resetOptions = function() {
           delete $scope.node.defn.options;
         };
diff --git a/ext/afform/gui/ang/afGuiEditor/inputType/Select.html b/ext/afform/gui/ang/afGuiEditor/inputType/Select.html
index 549e7a54a0..6d06d33571 100644
--- a/ext/afform/gui/ang/afGuiEditor/inputType/Select.html
+++ b/ext/afform/gui/ang/afGuiEditor/inputType/Select.html
@@ -1 +1,13 @@
-<input autocomplete="off" crm-ui-select="{data: select2Options, multiple: defn.input_attrs.multiple}" />
+<div class="form-inline">
+  <div class="input-group">
+    <input autocomplete="off" class="form-control" placeholder="{{ ts('Select') }}" ng-model="getSet('input_attrs.placeholder')" ng-model-options="{getterSetter: true}" type="text" />
+    <div class="input-group-btn" af-gui-menu>
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="crm-i fa-caret-down"></i></button>
+      <ul class="dropdown-menu" ng-if="menu.open">
+        <li ng-repeat="opt in getOptions()" >
+          <a href>{{ opt.label }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
-- 
2.25.1