From ae26fb6d3a9b09f8ce7dae15a6f32b84dd7bb2c7 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 17 Aug 2021 22:02:18 -0400
Subject: [PATCH] SearchKit - Add placeholder to token select

---
 .../crmSearchAdminTokenSelect.component.js     | 18 ++++++++++++++++++
 .../crmSearchAdminTokenSelect.html             |  4 ++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminTokenSelect.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminTokenSelect.component.js
index bdc96368c0..f364ebf66d 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminTokenSelect.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminTokenSelect.component.js
@@ -15,6 +15,13 @@
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
         ctrl = this;
 
+      this.$onInit = function() {
+        // Because this widget is so small, some placeholder text is helpful once it's open
+        $element.on('select2-open', function() {
+          $('#select2-drop > .select2-search > input').attr('placeholder', ts('Insert Token'));
+        });
+      };
+
       this.insertToken = function(key) {
         ctrl.model[ctrl.field] = (ctrl.model[ctrl.field] || '') + '[' + key + ']';
       };
@@ -32,6 +39,17 @@
         };
       };
 
+      this.tokenSelectSettings = {
+        data: this.getTokens,
+        // The crm-action-menu icon doesn't show without a placeholder
+        placeholder: ' ',
+        // Make this widget very compact
+        width: '52px',
+        containerCss: {minWidth: '52px'},
+        // Make the dropdown wider than the widget
+        dropdownCss: {width: '250px'}
+      };
+
     }
   });
 
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminTokenSelect.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminTokenSelect.html
index f4e1b37d77..1f37c9aab4 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminTokenSelect.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminTokenSelect.html
@@ -1,6 +1,6 @@
-<span title="{{:: ts('Insert Tokens') }}">
+<span title="{{:: ts('Insert Token') }}">
   <input class="form-control crm-action-menu fa-code collapsible-optgroups"
-         crm-ui-select="{placeholder: ' ', data: $ctrl.getTokens, width: '52px', containerCss: {minWidth: '52px'}, dropdownCss: {width: '250px'}}"
+         crm-ui-select="$ctrl.tokenSelectSettings"
          on-crm-ui-select="$ctrl.insertToken(selection)"
   />
 </span>
-- 
2.25.1