Merge pull request #3777 from AlchemyCMS/backport/8.1-stable/pr-3771

[8.1-stable] Fix element select search filtering

Author: tvdeyen

app/components/alchemy/admin/element_select.rb

@@ -30,7 +30,7 @@ def elements_options
 
         elements.sort_by(&:name).map do |element|
           {
-            name: Element.display_name_for(element.name),
+            text: Element.display_name_for(element.name),
             hint: element.hint,
             icon: element.icon_file,
             id: element.name

app/javascript/alchemy_admin/components/element_select.js

@@ -2,17 +2,19 @@ import { hightlightTerm } from "alchemy_admin/components/remote_select"
 
 const formatSelection = (option) => {
   return `
-    <div class="element-select-name">${option.icon} ${option.name}</div>
+    <div class="element-select-name">
+      ${option.icon}<span>${option.text}</span>
+    </div>
   `
 }
 
-const formatItem = (icon, name, hint) => {
+const formatItem = (icon, text, hint) => {
   const description = hint
     ? `<div class="element-select-description">${hint}</div>`
     : ""
   return `
     <div class="element-select-item">
-      ${formatSelection({ icon, name })}
+      ${formatSelection({ icon, text })}
       ${description}
     </div>
   `
@@ -34,11 +36,11 @@ class ElementSelect extends HTMLElement {
       formatResult: (option, _el, search) => {
         let text
 
-        if (option.id === "") return option.name
+        if (option.id === "") return option.text
         if (search.term !== "") {
-          text = hightlightTerm(option.name, search.term)
+          text = hightlightTerm(option.text, search.term)
         } else {
-          text = option.name
+          text = option.text
         }
 
         return formatItem(option.icon, text, option.hint)

spec/components/alchemy/admin/element_select_spec.rb

@@ -36,7 +36,7 @@
     options = JSON.parse(component["options"])
     expect(options).to match_array([
       {
-        "name" => "Headline",
+        "text" => "Headline",
         "icon" => an_instance_of(String),
         "hint" => "Use this for headlines.",
         "id" => "headline"