From 59acbbac3ab3b7dd211848c39d9c9dfb263ec9ab Mon Sep 17 00:00:00 2001
From: kosiakkatrina <54268893+kosiakkatrina@users.noreply.github.com>
Date: Tue, 7 May 2024 11:23:57 +0100
Subject: [PATCH] Take hint into account in select input (#2394)

---
 .../controllers/accessible_autocomplete_controller.js    | 4 ++--
 app/frontend/modules/search.js                           | 9 +++++++--
 spec/features/form/accessible_autocomplete_spec.rb       | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/frontend/controllers/accessible_autocomplete_controller.js b/app/frontend/controllers/accessible_autocomplete_controller.js
index f3a6ca1d8..6d781f248 100644
--- a/app/frontend/controllers/accessible_autocomplete_controller.js
+++ b/app/frontend/controllers/accessible_autocomplete_controller.js
@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 import accessibleAutocomplete from 'accessible-autocomplete'
 import 'accessible-autocomplete/dist/accessible-autocomplete.min.css'
-import { enhanceOption, suggestion, sort } from '../modules/search'
+import { enhanceOption, suggestion, sort, getSearchableName } from '../modules/search'
 
 export default class extends Controller {
   connect () {
@@ -28,7 +28,7 @@ export default class extends Controller {
       onConfirm: (val) => {
         const selectedOption = [].filter.call(
           selectOptions,
-          (option) => (option.textContent || option.innerText) === val
+          (option) => (getSearchableName(option)) === val
         )[0]
         if (selectedOption) selectedOption.selected = true
       }
diff --git a/app/frontend/modules/search.js b/app/frontend/modules/search.js
index 02d776b19..71944746e 100644
--- a/app/frontend/modules/search.js
+++ b/app/frontend/modules/search.js
@@ -110,7 +110,7 @@ export const sort = (query, options) => {
 export const suggestion = (value, options) => {
   const option = options.find((o) => o.name === value)
   if (option) {
-    const html = option.append ? `<span class="autocomplete__option__append">${value}</span> <span>${option.append}</span>` : `<span>${value}</span>`
+    const html = option.append ? `<span class="autocomplete__option__append">${option.text}</span> <span>${option.append}</span>` : `<span>${option.text}</span>`
     return option.hint ? `${html}<div class="autocomplete__option__hint">${option.hint}</div>` : html
   } else {
     return '<span>No results found</span>'
@@ -119,10 +119,15 @@ export const suggestion = (value, options) => {
 
 export const enhanceOption = (option) => {
   return {
-    name: option.label,
+    text: option.text,
+    name: getSearchableName(option),
     synonyms: (option.getAttribute('data-synonyms') ? option.getAttribute('data-synonyms').split('|') : []),
     append: option.getAttribute('data-append'),
     hint: option.getAttribute('data-hint'),
     boost: parseFloat(option.getAttribute('data-boost')) || 1
   }
 }
+
+export const getSearchableName = (option) => {
+  return option.getAttribute('data-hint') ? option.text + ' ' + option.getAttribute('data-hint') : option.text
+}
diff --git a/spec/features/form/accessible_autocomplete_spec.rb b/spec/features/form/accessible_autocomplete_spec.rb
index 780942685..30454da85 100644
--- a/spec/features/form/accessible_autocomplete_spec.rb
+++ b/spec/features/form/accessible_autocomplete_spec.rb
@@ -83,7 +83,7 @@ RSpec.describe "Accessible Autocomplete" do
 
     it "can match on synonyms", js: true do
       find("#lettings-log-scheme-id-field").click.native.send_keys("w", "6", :down, :enter)
-      expect(find("#lettings-log-scheme-id-field").value).to eq(scheme.service_name)
+      expect(find("#lettings-log-scheme-id-field").value).to include(scheme.service_name)
     end
 
     it "displays appended text next to the options", js: true do