fix: allow tab navigation out of empty combobox results

assets/js/hooks/combobox.js

@@ -442,8 +442,15 @@ export default {
     if (!this.isOpen) {
       return
     }
+
+    const focusedOption = this.getCurrentFocusedOption()
+    if (e.key === KEYS.TAB && !this.getVisibleOptions().includes(focusedOption)) {
+      this.handleBlur()
+      return
+    }
+
     e.preventDefault()
-    this.selectOption(this.getCurrentFocusedOption())
+    this.selectOption(focusedOption)
   },
 
   handleBackspace(e) {

demo/lib/demo_web/live/fixtures_live/async_combobox_fixture.html.heex

@@ -1,3 +1,5 @@
+<input id="previous-input" aria-label="Previous field" />
+
 <.combobox id="demo-async-combobox" name="user[favourite_fruit]">
   <.combobox_input
     on_search="async_combobox_search"
@@ -19,3 +21,5 @@
     <% end %>
   </.combobox_options>
 </.combobox>
+
+<input id="next-input" aria-label="Next field" />

demo/test/wallaby/demo_web/combobox_keyboard_navigation_test.exs

@@ -97,6 +97,42 @@ defmodule DemoWeb.ComboboxKeyboardNavigationTest do
     |> assert_has(@options_container |> Query.visible(false))
   end
 
+  for {key, keys, target} <- [
+        {"Tab", [:tab], "next-input"},
+        {"Shift+Tab", [:shift, :tab], "previous-input"}
+      ] do
+    @tag keys: keys, target: target
+    @feature_name "#{key} leaves an async combobox with no results"
+    feature @feature_name, %{
+      session: session,
+      keys: keys,
+      target: target
+    } do
+      input = Query.css("#demo-async-combobox input[data-prima-ref=search_input]")
+
+      session
+      |> visit_fixture("/fixtures/async-combobox", "#demo-async-combobox")
+      |> click(input)
+      |> click(Query.css("#demo-async-combobox [role=option][data-value=Cherry]"))
+      |> fill_in(input, with: "no matching fruit")
+      |> assert_has(Query.css("#demo-async-combobox-options", visible: true))
+      |> assert_has(Query.css("#demo-async-combobox [role=option]", count: 0))
+      |> send_keys(keys)
+      |> assert_has(Query.css("##{target}:focus"))
+      |> assert_has(Query.css("#demo-async-combobox-options", visible: false))
+      |> execute_script(
+        """
+        const root = document.querySelector('#demo-async-combobox');
+        return {
+          search: root.querySelector('[data-prima-ref=search_input]').value,
+          selection: root.querySelector('[data-prima-ref=submit_input]').value
+        };
+        """,
+        fn values -> assert values == %{"search" => "Cherry", "selection" => "Cherry"} end
+      )
+    end
+  end
+
   feature "ArrowDown opens combobox when closed and input is focused", %{session: session} do
     session
     |> visit_fixture("/fixtures/simple-combobox", "#demo-combobox")