Fix focus handling when clearing input in creatable combobox

- Reorder create option visibility logic to run after regular options filtering
- Add test for focus handling when clearing input after filtering to create option only
- Fix issue where Wallaby fill_in with empty string doesn't trigger input event
- Ensure first visible option gets focus when clearing filtered input

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: ukutaht

assets/js/hooks/combobox.js

@@ -98,10 +98,9 @@ export default {
   onInput(e) {
     const searchValue = e.target.value
 
-    // Update create option content and visibility
+    // Update create option content first
     if (this.hasCreateOption) {
       this.updateCreateOption(searchValue)
-      this.updateCreateOptionVisibility(searchValue)
     }
 
     if (this.mode === 'async') {
@@ -125,6 +124,11 @@ export default {
         }
       }
 
+      // Handle create option visibility after regular options are processed
+      if (this.hasCreateOption) {
+        this.updateCreateOptionVisibility(searchValue)
+      }
+
       if (previouslyFocusedOptionIsHidden) {
         this.focusFirstOption()
       }

lib/prima_web/live/demo_live/creatable_combobox_demo.html.heex

@@ -10,6 +10,7 @@
       transition_leave={{"ease-in duration-100", "opacity-100", "opacity-0"}}
       class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
     >
+
       <%= for option <- ["Apple", "Pear", "Mango", "Pineapple"] do %>
         <.combobox_option
           value={option}
@@ -18,7 +19,6 @@
           {option}
         </.combobox_option>
       <% end %>
-
       <.creatable_option class="group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-500 data-focus:bg-indigo-600 data-focus:text-white italic border-t border-gray-200" />
     </.combobox_options>
   </.combobox>

test/wallaby/prima_web/creatable_combobox_test.exs

@@ -210,4 +210,64 @@ defmodule PrimaWeb.CreatableComboboxTest do
       Query.css("#demo-creatable-combobox [role=option][data-value='Apple'][data-focus=true]")
     )
   end
+
+  feature "focus handling when clearing input after filtering to create option only", %{
+    session: session
+  } do
+    session
+    |> visit("/fixtures/creatable-combobox")
+    |> click(@search_input)
+    |> fill_in(@search_input, with: "z")
+    # Only create option should be visible
+    |> assert_has(@create_option |> Query.visible(true))
+    |> assert_has(
+      Query.css("#demo-creatable-combobox [data-prima-ref=create-option][data-focus=true]")
+    )
+    # All regular options should be hidden
+    |> assert_missing(
+      Query.css("#demo-creatable-combobox [role=option][data-value='Apple']")
+      |> Query.visible(true)
+    )
+    |> assert_missing(
+      Query.css("#demo-creatable-combobox [role=option][data-value='Pear']")
+      |> Query.visible(true)
+    )
+    |> assert_missing(
+      Query.css("#demo-creatable-combobox [role=option][data-value='Mango']")
+      |> Query.visible(true)
+    )
+    |> assert_missing(
+      Query.css("#demo-creatable-combobox [role=option][data-value='Pineapple']")
+      |> Query.visible(true)
+    )
+    # Clear the input
+    |> fill_in(@search_input, with: "")
+    # Manually trigger input event since Wallaby doesn't trigger it for empty values
+    |> execute_script(
+      "document.querySelector('#demo-creatable-combobox input[data-prima-ref=search_input]').dispatchEvent(new Event('input', {bubbles: true}))"
+    )
+    # Create option should be hidden (empty input)
+    |> assert_missing(@create_option |> Query.visible(true))
+    # All regular options should be visible again
+    |> assert_has(
+      Query.css("#demo-creatable-combobox [role=option][data-value='Apple']")
+      |> Query.visible(true)
+    )
+    |> assert_has(
+      Query.css("#demo-creatable-combobox [role=option][data-value='Pear']")
+      |> Query.visible(true)
+    )
+    |> assert_has(
+      Query.css("#demo-creatable-combobox [role=option][data-value='Mango']")
+      |> Query.visible(true)
+    )
+    |> assert_has(
+      Query.css("#demo-creatable-combobox [role=option][data-value='Pineapple']")
+      |> Query.visible(true)
+    )
+    # First visible option (Apple) should be focused
+    |> assert_has(
+      Query.css("#demo-creatable-combobox [role=option][data-value='Apple'][data-focus=true]")
+    )
+  end
 end