huddlz-hq · mwoods79 · Mar 4, 2026 · Mar 1, 2026 · Mar 1, 2026
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -28,12 +28,10 @@ const Hooks = {}
 
 Hooks.LocationAutocomplete = {
   mounted() {
-    this.highlightIndex = -1
     this.setupInput()
   },
 
   updated() {
-    this.syncHighlightFromDOM()
     if (!this._input || !this.el.contains(this._input)) {
       this.setupInput()
     }
@@ -46,85 +44,23 @@ Hooks.LocationAutocomplete = {
   },
 
   setupInput() {
-    this._input = this.el.querySelector("input[role='combobox']")
-    if (!this._input) return
-
-    if (this._handler) {
+    if (this._input && this._handler) {
       this._input.removeEventListener("keydown", this._handler)
     }
 
+    this._input = this.el.querySelector("input[role='combobox']")
+    if (!this._input) return
+
     this._handler = (e) => this.handleKeydown(e)
     this._input.addEventListener("keydown", this._handler)
   },
 
   handleKeydown(e) {
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault()
-      e.stopPropagation()
-
-      const listbox = this.el.querySelector("[role='listbox']")
-      if (!listbox) return
-
-      const options = listbox.querySelectorAll("[role='option']")
-      if (options.length === 0) return
-
-      this.moveHighlight(e.key === "ArrowDown" ? 1 : -1, options)
-      this.pushEventTo(this.el, "keydown", {key: e.key})
-    } else if (e.key === "Enter") {
-      const listbox = this.el.querySelector("[role='listbox']")
-      if (listbox && this.highlightIndex >= 0) {
-        e.preventDefault()
-        e.stopPropagation()
-
-        const options = listbox.querySelectorAll("[role='option']")
-        const highlighted = options[this.highlightIndex]
-        if (highlighted) {
-          this.pushEventTo(this.el, "select", {
-            "place-id": highlighted.dataset.placeId,
-            "display-text": highlighted.dataset.displayText
-          })
-        }
-      }
-    } else if (e.key === "Escape") {
-      e.stopPropagation()
-      this.pushEventTo(this.el, "keydown", {key: "Escape"})
-    }
-  },
-
-  moveHighlight(direction, options) {
-    const maxIdx = options.length - 1
-    const newIdx = direction > 0
-      ? Math.min(this.highlightIndex + 1, maxIdx)
-      : Math.max(this.highlightIndex - 1, -1)
-
-    if (this.highlightIndex >= 0 && this.highlightIndex < options.length) {
-      options[this.highlightIndex].classList.remove("bg-primary/20", "border-l-primary")
-      options[this.highlightIndex].classList.add("border-l-transparent")
-    }
-
-    if (newIdx >= 0 && newIdx < options.length) {
-      options[newIdx].classList.add("bg-primary/20", "border-l-primary")
-      options[newIdx].classList.remove("border-l-transparent")
-    }
-
-    this.highlightIndex = newIdx
-  },
-
-  syncHighlightFromDOM() {
-    const listbox = this.el.querySelector("[role='listbox']")
-    if (!listbox) {
-      this.highlightIndex = -1
-      return
+    } else if (e.key === "Enter" && this.el.dataset.hasHighlight === "true") {
+      e.preventDefault()
     }
-
-    const options = listbox.querySelectorAll("[role='option']")
-    this.highlightIndex = -1
-    options.forEach((opt, idx) => {
-      if (opt.classList.contains("border-l-primary") &&
-          !opt.matches(":hover")) {
-        this.highlightIndex = idx
-      }
-    })
   }
 }
 

diff --git a/lib/huddlz_web/live/location_autocomplete.ex b/lib/huddlz_web/live/location_autocomplete.ex
@@ -52,12 +52,8 @@ defmodule HuddlzWeb.Live.LocationAutocomplete do
      )}
   end
 
-  def update(%{trigger_enter: true}, socket) do
-    {:ok, try_select_highlighted(socket)}
-  end
-
   def update(assigns, socket) do
-    socket = assign(socket, Map.drop(assigns, [:value, :latitude, :longitude, :trigger_enter]))
+    socket = assign(socket, Map.drop(assigns, [:value, :latitude, :longitude]))
 
     socket =
       if socket.assigns.initialized do
@@ -99,19 +95,7 @@ defmodule HuddlzWeb.Live.LocationAutocomplete do
     value = assigns[:value]
 
     if is_nil(value) && socket.assigns.selected do
-      assign(socket,
-        selected: false,
-        selected_text: nil,
-        selected_place_id: nil,
-        selected_lat: nil,
-        selected_lng: nil,
-        search_text: "",
-        suggestions: [],
-        show_suggestions: false,
-        suggestion_index: -1,
-        error: nil,
-        session_token: Ecto.UUID.generate()
-      )
+      reset_state(socket)
     else
       socket
     end
@@ -125,6 +109,7 @@ defmodule HuddlzWeb.Live.LocationAutocomplete do
       phx-click-away="dismiss"
       phx-target={@myself}
       phx-hook="LocationAutocomplete"
+      data-has-highlight={to_string(@suggestion_index >= 0)}
     >
       <label :if={@label} for={"#{@id}-input"} class={@label_class}>
         {@label}
@@ -217,9 +202,6 @@ defmodule HuddlzWeb.Live.LocationAutocomplete do
             type="button"
             id={"#{@id}-option-#{idx}"}
             role="option"
-            data-index={idx}
-            data-place-id={s.place_id}
-            data-display-text={s.display_text}
             phx-click="select"
             phx-value-place-id={s.place_id}
             phx-value-display-text={s.display_text}
@@ -280,20 +262,7 @@ defmodule HuddlzWeb.Live.LocationAutocomplete do
   def handle_event("clear", _params, socket) do
     notify_parent(socket, :cleared, nil)
 
-    {:noreply,
-     assign(socket,
-       selected: false,
-       selected_text: nil,
-       selected_place_id: nil,
-       selected_lat: nil,
-       selected_lng: nil,
-       search_text: "",
-       suggestions: [],
-       show_suggestions: false,
-       suggestion_index: -1,
-       error: nil,
-       session_token: Ecto.UUID.generate()
-     )}
+    {:noreply, reset_state(socket)}
   end
 
   def handle_event("dismiss", _params, socket) do
@@ -392,6 +361,22 @@ defmodule HuddlzWeb.Live.LocationAutocomplete do
     end
   end
 
+  defp reset_state(socket) do
+    assign(socket,
+      selected: false,
+      selected_text: nil,
+      selected_place_id: nil,
+      selected_lat: nil,
+      selected_lng: nil,
+      search_text: "",
+      suggestions: [],
+      show_suggestions: false,
+      suggestion_index: -1,
+      error: nil,
+      session_token: Ecto.UUID.generate()
+    )
+  end
+
   defp select_suggestion(socket, place_id, display_text) do
     socket =
       assign(socket,

diff --git a/lib/huddlz_web/live/profile_live.ex b/lib/huddlz_web/live/profile_live.ex
@@ -178,7 +178,7 @@ defmodule HuddlzWeb.ProfileLive do
             Set your home city to pre-fill location search when browsing huddlz.
           </p>
 
-          <form phx-change="noop" phx-submit="location_enter">
+          <form phx-change="noop" phx-submit="noop">
             <div class="flex items-end gap-3">
               <div class="flex-1">
                 <.live_component
@@ -330,16 +330,6 @@ defmodule HuddlzWeb.ProfileLive do
   @impl true
   def handle_event("noop", _params, socket), do: {:noreply, socket}
 
-  @impl true
-  def handle_event("location_enter", _params, socket) do
-    send_update(HuddlzWeb.Live.LocationAutocomplete,
-      id: "profile-location",
-      trigger_enter: true
-    )
-
-    {:noreply, socket}
-  end
-
   @impl true
   def handle_event("validate_avatar", _params, socket) do
     {:noreply, assign(socket, :avatar_error, nil)}