Take hint into account in select input (#2394)

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
       }

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
+}

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