Fix keyboard navigation bugs in creatable combobox

- Fix arrow key navigation to skip hidden options by filtering :not([data-hidden])
- Fix focus handling when create option disappears due to exact match
- Add comprehensive tests for keyboard navigation edge cases
- Update CLAUDE.md with correct Wallaby arrow key syntax
- Add creatable_option component for user-created options

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

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

Author: ukutaht

CLAUDE.md

@@ -132,6 +132,18 @@ end
   # Instead of slow:
   |> refute_has(Query.css("#element[data-focus]"))  # waits 3000ms
   ```
+- **Arrow key navigation**: Use correct Wallaby syntax for arrow keys in tests:
+  ```elixir
+  # Correct syntax:
+  |> send_keys([:down_arrow])
+  |> send_keys([:up_arrow])
+  |> send_keys([:left_arrow])
+  |> send_keys([:right_arrow])
+
+  # Incorrect (doesn't work):
+  |> send_keys([:arrow_down])    # Wrong
+  |> send_keys([:arrow_up])      # Wrong
+  ```
 - **JavaScript debugging**: Enable JS console logging in a test by adding `Application.put_env(:wallaby, :js_logger, :stdio)` at the beginning of the test feature. This allows you to see `console.log()` output from JavaScript hooks during test execution. More convenient than modifying config files:
   ```elixir
   feature "my test with logging", %{session: session} do
@@ -148,4 +160,4 @@ end
 ### Code Comments
 - Remember to not add unnecessary comments
 - Only add comments to document tricky operations or add additional context
-- Pedantic comments are useless
+- Pedantic comments are useless

assets/js/hooks/combobox.js

@@ -1,11 +1,15 @@
 export default {
   mounted() {
     this.mode = this.getMode()
+    this.createOption = this.el.querySelector('[data-prima-ref=create-option]')
+    this.hasCreateOption = !!this.createOption
     this.el.addEventListener('mouseover', this.onHover.bind(this))
     this.el.addEventListener('keydown', this.onKey.bind(this))
     this.el.addEventListener('click', this.onClick.bind(this))
     this.el.querySelector('input[data-prima-ref=search_input]').addEventListener('focus', this.showOptions.bind(this))
 
+    this.initializeCreateOption()
+
     if(document.activeElement === this.el.querySelector('input[data-prima-ref=search_input]')) {
       this.showOptions()
     }
@@ -29,8 +33,18 @@ export default {
 
   selectOption(el) {
     const value = el.getAttribute('data-value')
-    this.el.querySelector('input[data-prima-ref=submit_input]').value = value
-    this.el.querySelector('input[data-prima-ref=search_input]').value = value
+    const searchInput = this.el.querySelector('input[data-prima-ref=search_input]')
+    const submitInput = this.el.querySelector('input[data-prima-ref=submit_input]')
+
+    if (value === '__CREATE__') {
+      const searchValue = searchInput.value
+      submitInput.value = searchValue
+      searchInput.value = searchValue
+    } else {
+      submitInput.value = value
+      searchInput.value = value
+    }
+
     this.hideOptions()
   },
 
@@ -41,24 +55,25 @@ export default {
   },
 
   onKey(e) {
-    const allOptions = Array.from(this.el.querySelectorAll('[role=option]'))
-    const firstOption = allOptions[0]
-    const lastOption = allOptions[allOptions.length - 1]
-    const currentFocusIndex = allOptions.findIndex(option => option.getAttribute('data-focus') === 'true')
+    const visibleOptions = Array.from(this.el.querySelectorAll('[role=option]:not([data-hidden])'))
+    const firstOption = visibleOptions[0]
+    const lastOption = visibleOptions[visibleOptions.length - 1]
+    const currentFocusIndex = visibleOptions.findIndex(option => option.getAttribute('data-focus') === 'true')
+
 
     if (e.key === 'ArrowUp') {
       e.preventDefault()
       if (firstOption.getAttribute('data-focus') === 'true') {
         this.setFocus(lastOption)
       } else {
-        this.setFocus(allOptions[currentFocusIndex - 1])
+        this.setFocus(visibleOptions[currentFocusIndex - 1])
       }
     } else if (e.key === 'ArrowDown') {
       e.preventDefault()
       if (lastOption.getAttribute('data-focus') === 'true') {
         this.setFocus(firstOption)
       } else {
-        this.setFocus(allOptions[currentFocusIndex + 1])
+        this.setFocus(visibleOptions[currentFocusIndex + 1])
       }
     } else if (e.key === "Enter" || e.key === "Tab") {
       e.preventDefault()
@@ -81,13 +96,21 @@ export default {
   },
 
   onInput(e) {
+    const searchValue = e.target.value
+
+    // Update create option content and visibility
+    if (this.hasCreateOption) {
+      this.updateCreateOption(searchValue)
+      this.updateCreateOptionVisibility(searchValue)
+    }
+
     if (this.mode === 'async') {
       const options = this.el.querySelector('[data-prima-ref=options]')
       this.liveSocket.execJS(options, options.getAttribute('js-show'));
       this.focusedOptionBeforeUpdate = this.currentlyFocusedOption()?.dataset.value
     } else {
-      const q = e.target.value.toLowerCase()
-      const allOptions = this.el.querySelectorAll('[role=option]')
+      const q = searchValue.toLowerCase()
+      const allOptions = this.el.querySelectorAll('[role=option]:not([data-prima-ref=create-option])')
       let previouslyFocusedOptionIsHidden = false
 
       for (const option of allOptions) {
@@ -123,6 +146,13 @@ export default {
     this.liveSocket.execJS(options, options.getAttribute('js-show'));
     this.el.querySelector('input[data-prima-ref=search_input]').select()
 
+    // Update create option when showing options
+    if (this.hasCreateOption) {
+      const searchValue = this.el.querySelector('input[data-prima-ref=search_input]').value
+      this.updateCreateOption(searchValue)
+      this.updateCreateOptionVisibility(searchValue)
+    }
+
     this.focusFirstOption()
 
     const handleClickOutside = (event) => {
@@ -167,5 +197,48 @@ export default {
 
   currentlyFocusedOption() {
     return this.el.querySelector('[role=option][data-focus=true]')
+  },
+
+  updateCreateOption(searchValue) {
+    if (!this.createOption) return
+    this.createOption.textContent = `Create "${searchValue}"`
+  },
+
+  updateCreateOptionVisibility(searchValue) {
+    if (!this.createOption) return
+
+    if (searchValue.length > 0 && !this.hasExactMatch(searchValue)) {
+      this.showOption(this.createOption)
+    } else {
+      // Check if create option is currently focused before hiding it
+      const createOptionHasFocus = this.createOption.getAttribute('data-focus') === 'true'
+      this.hideOption(this.createOption)
+
+      // If create option was focused, move focus to first visible option
+      if (createOptionHasFocus) {
+        this.focusFirstOption()
+      }
+    }
+  },
+
+  hasExactMatch(searchValue) {
+    const regularOptions = this.el.querySelectorAll('[role=option]:not([data-prima-ref=create-option])')
+    const hasStaticMatch = Array.from(regularOptions).some(option =>
+      option.getAttribute('data-value') === searchValue
+    )
+
+    // Also check if search value matches current selected value (submit input)
+    const submitInput = this.el.querySelector('input[data-prima-ref=submit_input]')
+    const hasSelectedMatch = submitInput.value === searchValue
+
+
+    return hasStaticMatch || hasSelectedMatch
+  },
+
+  initializeCreateOption() {
+    if (!this.hasCreateOption) return
+
+    // Hide create option initially since search input starts empty
+    this.hideOption(this.createOption)
   }
 }

lib/prima/combobox.ex

@@ -74,4 +74,18 @@ defmodule Prima.Combobox do
     </div>
     """
   end
+
+  attr :class, :string, default: ""
+
+  def creatable_option(assigns) do
+    ~H"""
+    <div
+      role="option"
+      data-prima-ref="create-option"
+      data-value="__CREATE__"
+      class={@class}
+    >
+    </div>
+    """
+  end
 end

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

@@ -18,6 +18,7 @@
           {option}
         </.combobox_option>
       <% end %>
+
     </.combobox_options>
   </.combobox>
 </form>

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

@@ -15,6 +15,10 @@
     <.combobox_demo {assigns} />
   </.demo_section>
 
+  <.demo_section title="Creatable Combobox" id="combobox-creatable">
+    <.creatable_combobox_demo {assigns} />
+  </.demo_section>
+
   <.demo_section title="Async Combobox with Search" id="combobox-async">
     <.async_combobox_demo {assigns} />
   </.demo_section>

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

@@ -0,0 +1,25 @@
+<form>
+  <.combobox class="relative w-64" id="creatable-combobox">
+    <.combobox_input
+      name="creatable-combobox[fruit]"
+      class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 cursor-default placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+      placeholder="Type to search or create..."
+    />
+
+    <.combobox_options
+      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}
+          class="group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 data-focus:bg-indigo-600 data-focus:text-white"
+        >
+          {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>
+</form>

lib/prima_web/live/fixtures_live.ex

@@ -23,6 +23,11 @@ defmodule PrimaWeb.FixturesLive do
     {:ok, socket}
   end
 
+  @impl true
+  def handle_params(%{"live_action" => live_action}, _uri, socket) do
+    {:noreply, assign(socket, live_action: live_action)}
+  end
+
   @impl true
   def handle_params(_params, _uri, socket) do
     {:noreply, socket}

lib/prima_web/live/fixtures_live.html.heex

@@ -17,3 +17,7 @@
 <div :if={@live_action == :async_combobox}>
   <.async_combobox_fixture {assigns} />
 </div>
+
+<div :if={@live_action == :creatable_combobox}>
+  <.creatable_combobox_fixture />
+</div>

lib/prima_web/live/fixtures_live/creatable_combobox_fixture.html.heex

@@ -0,0 +1,26 @@
+<form>
+  <.combobox class="relative w-64" id="demo-creatable-combobox">
+    <.combobox_input
+      name="demo-creatable-combobox[fruit]"
+      class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 cursor-default placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+      placeholder="Type to search or create..."
+    />
+
+    <.combobox_options
+      id="demo-creatable-combobox-options"
+      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}
+          class="group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 data-focus:bg-indigo-600 data-focus:text-white"
+        >
+          {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>
+</form>

lib/prima_web/router.ex

@@ -27,6 +27,7 @@ defmodule PrimaWeb.Router do
       live "/fixtures/async-modal", FixturesLive, :async_modal
       live "/fixtures/simple-combobox", FixturesLive, :simple_combobox
       live "/fixtures/async-combobox", FixturesLive, :async_combobox
+      live "/fixtures/creatable-combobox", FixturesLive, :creatable_combobox
     end
   end
 end