Maintain focus on drop-down list after selecting an item

Closes #4719
pulibrary · Feb 5, 2025 · ce3f380 · ce3f380
1 parent 6414a52
commit ce3f380
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/app/javascript/orangelight/multiselect_combobox.es6 b/app/javascript/orangelight/multiselect_combobox.es6
@@ -77,6 +77,8 @@ export default class MultiselectCombobox {
       (event) => {
         if (event.code == 'Enter') {
           this.toggleItem(item);
+          // Maintain focus on the list, in case the user wants to select another item in the list
+          event.target.focus();
         } else if (event.code == 'ArrowUp' || event.code == 'ArrowDown') {
           return;
         } else {

diff --git a/spec/system/numismatics_form_spec.rb b/spec/system/numismatics_form_spec.rb
@@ -39,5 +39,11 @@
     page.send_keys(:down)
     active_element = page.evaluate_script("document.activeElement")
     expect(active_element.text).to eq("follis (1)")
+    page.send_keys(:return)
+    hidden_select_options = page.find_all('#issue_denomination_s-select option', visible: false)
+    expect(hidden_select_options[1]).to be_selected
+    active_element = page.evaluate_script("document.activeElement")
+    # It shouldn't switch focus to the entire page, but stay in the list
+    expect(active_element.text).not_to include('Skip to main content')
   end
 end