diff --git a/app/helpers/standard_form_builder.rb b/app/helpers/standard_form_builder.rb index 095d8de67f..04556b3b91 100644 --- a/app/helpers/standard_form_builder.rb +++ b/app/helpers/standard_form_builder.rb @@ -316,6 +316,7 @@ def person_field(attr, html_options = {}) # rubocop:disable Metrics/MethodLength disabled: disabled, data: { provide: 'entity', id_field: "#{object_name}_#{attr_id}", + no_results_message: I18n.t('global.no_list_entries'), url: html_options&.dig(:data, :url) || @template.query_people_path }) end diff --git a/app/javascript/javascripts/modules/remote_autocomplete.js b/app/javascript/javascripts/modules/remote_autocomplete.js index 54b9a357cd..947fee338c 100644 --- a/app/javascript/javascripts/modules/remote_autocomplete.js +++ b/app/javascript/javascripts/modules/remote_autocomplete.js @@ -44,21 +44,30 @@ import { mark } from "@tarekraafat/autocomplete.js/src/helpers/io"; if (input.dataset.typeaheadDisabled === "true") return; try { - if (isQuickSearch) { - document.getElementById(QUICKSEARCH_ID).classList.add("input-loading"); - } + input.classList.add("input-loading"); // Fetch data via AJAX request - const url = new URL(input.dataset.url, location.origin) - const queryKey = document.getElementById(input.id).dataset.param || "q"; - url.searchParams.set(queryKey, query) + const url = new URL(input.dataset.url, location.origin); + const queryKey = + document.getElementById(input.id).dataset.param || "q"; + url.searchParams.set(queryKey, query); const source = await fetch(url); const data = await source.json(); - if (isQuickSearch) { - document.getElementById(QUICKSEARCH_ID).classList.remove("input-loading"); + input.classList.remove("input-loading"); + var noResultsMessage = + autoCompleteInput.input.dataset.noResultsMessage; + if (!!noResultsMessage && !data.length) { + return [ + { + id: null, + label: noResultsMessage, + noResultsItem: true, + }, + ]; + } else { + return data; } - return data; } catch (error) { return error; } @@ -76,6 +85,10 @@ import { mark } from "@tarekraafat/autocomplete.js/src/helpers/io"; input: { selection: (event) => { var selection = event.detail.selection.value; + if (selection.noResultsItem) { + return; + } + autoCompleteInput.input.value = selection.label; if (isQuickSearch) { diff --git a/spec/features/event/events_controller_spec.rb b/spec/features/event/events_controller_spec.rb index 9792f032af..a9382f2ba4 100644 --- a/spec/features/event/events_controller_spec.rb +++ b/spec/features/event/events_controller_spec.rb @@ -65,6 +65,20 @@ def click_save end end + it 'shows no results message for contact and does not interact with message click' do + sign_in + visit edit_path + + notification_checkbox_visible(false) + + query = 'querythatdoesnotmatch' + fill_in 'Kontaktperson', with: query + expect(find('ul[role="listbox"] li[role="option"]')).to have_content 'Keine Einträge gefunden.' + find('ul[role="listbox"] li[role="option"]').click + + expect(find('#event_contact').value).to eq(query) + end + it 'toggles participation notifications' do event.update(contact: people(:top_leader))