From 9ae5755d052c2f08517f431b94f0a4004c826dc0 Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Thu, 19 Feb 2026 15:34:53 +0800
Subject: [PATCH 01/10] implement restore on focus

---
 assets/js/live_select.js                      |  7 +-
 lib/live_select.ex                            |  5 +
 lib/live_select/component.ex                  | 19 +++-
 .../live_select_web/live/showcase_live.ex     |  3 +
 test/live_select_test.exs                     | 91 +++++++++++++++++++
 5 files changed, 123 insertions(+), 2 deletions(-)

diff --git a/assets/js/live_select.js b/assets/js/live_select.js
index d105f35..fb531b4 100644
--- a/assets/js/live_select.js
+++ b/assets/js/live_select.js
@@ -89,7 +89,7 @@ export default {
         },
         mounted() {
             this.maybeStyleClearButtons()
-            this.handleEvent("select", ({ id, selection, mode, current_text, input_event, parent_event }) => {
+            this.handleEvent("select", ({ id, selection, mode, current_text, input_event, parent_event, trigger_change }) => {
                 if (this.el.id === id) {
                     this.selection = selection
                     if (current_text != null) {
@@ -101,6 +101,11 @@ export default {
                     if (parent_event) {
                         this.pushEventToParent(parent_event, { id })
                     }
+                    if (trigger_change) {
+                        const field = this.el.dataset['field']
+                        this.pushEventTo(this.el, "change", { text: current_text })
+                        this.pushEventToParent("live_select_change", { id: this.el.id, field, text: current_text })
+                    }
                 }
             })
             this.handleEvent("scroll_to_option", ({ id, idx }) => {
diff --git a/lib/live_select.ex b/lib/live_select.ex
index 4385fcc..9c3676c 100644
--- a/lib/live_select.ex
+++ b/lib/live_select.ex
@@ -418,6 +418,11 @@ defmodule LiveSelect do
     doc:
       ~s(if `true`, the current list of selectable options and the content of the input text field are preserved upon selection)
 
+  attr :restore_on_focus, :boolean,
+    default: Component.default_opts()[:restore_on_focus],
+    doc:
+      ~s(if `true`, when in single mode, the input text field is preserved to the active option label upon selection.)
+
   attr :value, :any, doc: "used to manually set a selection - overrides any values from the form.
   Must be a single element in `:single` mode, or a list of elements in `:tags` mode."
 
diff --git a/lib/live_select/component.ex b/lib/live_select/component.ex
index c08e452..2272b90 100644
--- a/lib/live_select/component.ex
+++ b/lib/live_select/component.ex
@@ -20,6 +20,7 @@ defmodule LiveSelect.Component do
     clear_tag_button_class: nil,
     clear_tag_button_extra_class: nil,
     keep_options_on_select: false,
+    restore_on_focus: false,
     current_text: "",
     user_defined_options: false,
     container_class: nil,
@@ -218,12 +219,28 @@ defmodule LiveSelect.Component do
 
   @impl true
   def handle_event(event, _params, socket) when event in ~w(focus click) do
+    restore =
+      socket.assigns.restore_on_focus &&
+        socket.assigns.mode == :single &&
+        socket.assigns.selection != []
+
+    current_text =
+      if restore do
+        List.first(socket.assigns.selection).label
+      else
+        socket.assigns.current_text
+      end
+
+    trigger_change = restore && Enum.empty?(socket.assigns.options)
+
     socket =
       socket
+      |> assign(current_text: current_text)
       |> client_select(%{
         input_event: false,
         parent_event: socket.assigns[:"phx-focus"],
-        current_text: socket.assigns.current_text
+        current_text: current_text,
+        trigger_change: trigger_change
       })
       |> assign(hide_dropdown: false)
 
diff --git a/lib/support/live_select_web/live/showcase_live.ex b/lib/support/live_select_web/live/showcase_live.ex
index cf49fa7..d44ee78 100644
--- a/lib/support/live_select_web/live/showcase_live.ex
+++ b/lib/support/live_select_web/live/showcase_live.ex
@@ -76,6 +76,8 @@ defmodule LiveSelectWeb.ShowcaseLive do
         default: Component.default_opts()[:keep_options_on_select]
       )
 
+      field(:restore_on_focus, :boolean, default: Component.default_opts()[:restore_on_focus])
+
       field(:mode, Ecto.Enum,
         values: [:single, :tags, :quick_tags],
         default: Component.default_opts()[:mode]
@@ -106,6 +108,7 @@ defmodule LiveSelectWeb.ShowcaseLive do
           :disabled,
           :options_styled_as_checkboxes,
           :keep_options_on_select,
+          :restore_on_focus,
           :max_selectable,
           :user_defined_options,
           :mode,
diff --git a/test/live_select_test.exs b/test/live_select_test.exs
index ab55024..cbe3479 100644
--- a/test/live_select_test.exs
+++ b/test/live_select_test.exs
@@ -1213,4 +1213,95 @@ defmodule LiveSelectTest do
 
     refute_selected(live)
   end
+
+  describe "when restore_on_focus = true" do
+    setup %{conn: conn} do
+      stub_options(A: 1, B: 2, C: 3)
+
+      {:ok, live, _html} = live(conn, "/?restore_on_focus=true")
+
+      type(live, "ABC")
+      select_nth_option(live, 2)
+      assert_selected(live, :B, 2)
+
+      %{live: live}
+    end
+
+    test "on focus, the text input is set to the selected label", %{live: live} do
+      element(live, selectors()[:text_input])
+      |> render_focus()
+
+      assert_set_text_field(live, :B)
+    end
+
+    test "on click, the text input is set to the selected label", %{live: live} do
+      element(live, selectors()[:text_input])
+      |> render_click()
+
+      assert_set_text_field(live, :B)
+    end
+
+    test "on focus with cleared options, trigger_change is sent", %{live: live} do
+      element(live, selectors()[:text_input])
+      |> render_focus()
+
+      assert_push_event(live, "select", %{
+        id: "my_form_city_search_live_select_component",
+        current_text: :B,
+        trigger_change: true
+      })
+    end
+
+    test "on blur, the text input is restored to the selected label", %{live: live} do
+      element(live, selectors()[:text_input])
+      |> render_focus()
+
+      element(live, selectors()[:text_input])
+      |> render_blur()
+
+      assert_set_text_field(live, :B)
+    end
+
+    test "blur then focus cycle preserves the selected label", %{live: live} do
+      element(live, selectors()[:text_input])
+      |> render_blur()
+
+      element(live, selectors()[:text_input])
+      |> render_focus()
+
+      assert_set_text_field(live, :B)
+
+      element(live, selectors()[:text_input])
+      |> render_blur()
+
+      assert_selected_static(live, :B, 2)
+    end
+
+    test "does not trigger_change when options are present", %{live: live} do
+      stub_options(A: 1, B: 2, C: 3)
+      type(live, "ABC")
+
+      element(live, selectors()[:text_input])
+      |> render_focus()
+
+      assert_push_event(live, "select", %{
+        id: "my_form_city_search_live_select_component",
+        current_text: :B,
+        trigger_change: false
+      })
+    end
+
+    test "without a selection, focus behaves as default", %{conn: conn} do
+      stub_options(A: 1, B: 2, C: 3)
+
+      {:ok, live, _html} = live(conn, "/?restore_on_focus=true")
+
+      type(live, "ABC")
+
+      element(live, selectors()[:text_input])
+      |> render_focus()
+
+      assert_set_text_field(live, "ABC")
+    end
+  end
 end

From dd8fd73b0c68d5188458ca9638b59bbbdce885cf Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Thu, 19 Feb 2026 15:36:42 +0800
Subject: [PATCH 02/10] implement demo in showcase app

---
 lib/support/live_select_web/live/showcase_live.ex        | 3 ++-
 lib/support/live_select_web/live/showcase_live.html.heex | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/lib/support/live_select_web/live/showcase_live.ex b/lib/support/live_select_web/live/showcase_live.ex
index d44ee78..4fa8da1 100644
--- a/lib/support/live_select_web/live/showcase_live.ex
+++ b/lib/support/live_select_web/live/showcase_live.ex
@@ -148,7 +148,8 @@ defmodule LiveSelectWeb.ShowcaseLive do
         (remove_defaults && value == Keyword.get(default_opts, option)) ||
           (settings.mode == :single && option == :max_selectable) ||
           (settings.mode != :single && option == :allow_clear) ||
-          (settings.mode == :quick_tags && option == :keep_options_on_select)
+          (settings.mode == :quick_tags && option == :keep_options_on_select) ||
+          (settings.mode != :single && option == :restore_on_focus)
       end)
       |> Keyword.new()
     end
diff --git a/lib/support/live_select_web/live/showcase_live.html.heex b/lib/support/live_select_web/live/showcase_live.html.heex
index d1f9ef7..6e92b15 100644
--- a/lib/support/live_select_web/live/showcase_live.html.heex
+++ b/lib/support/live_select_web/live/showcase_live.html.heex
@@ -74,6 +74,13 @@
                 disabled: to_string(@settings_form[:mode].value) == "quick_tags"
               )}
             </label>
+            <label class="label cursor-pointer">
+              <span class="label-text mr-1">Restore on focus:</span>
+              {checkbox(@settings_form, :restore_on_focus,
+                class: "toggle",
+                disabled: to_string(@settings_form[:mode].value) != "single"
+              )}
+            </label>
             <%= label class: "label cursor-pointer" do %>
               <span class="label-text mr-1">Disabled:&nbsp;</span>
               {checkbox(@settings_form, :disabled, class: "toggle")}

From 2877b0f8d4268206eb6f8b91cb9b5c922cb23627 Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Thu, 19 Feb 2026 15:38:49 +0800
Subject: [PATCH 03/10] refactor option name to "keep_label_on_select" to be
 more align with the rest of the options.

---
 lib/live_select.ex                                       | 6 +++---
 lib/live_select/component.ex                             | 4 ++--
 lib/support/live_select_web/live/showcase_live.ex        | 8 +++++---
 lib/support/live_select_web/live/showcase_live.html.heex | 4 ++--
 test/live_select_test.exs                                | 6 +++---
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/lib/live_select.ex b/lib/live_select.ex
index 9c3676c..75d19ae 100644
--- a/lib/live_select.ex
+++ b/lib/live_select.ex
@@ -418,10 +418,10 @@ defmodule LiveSelect do
     doc:
       ~s(if `true`, the current list of selectable options and the content of the input text field are preserved upon selection)
 
-  attr :restore_on_focus, :boolean,
-    default: Component.default_opts()[:restore_on_focus],
+  attr :keep_label_on_select, :boolean,
+    default: Component.default_opts()[:keep_label_on_select],
     doc:
-      ~s(if `true`, when in single mode, the input text field is preserved to the active option label upon selection.)
+      ~s(if `true`, when in single mode, the input text field is preserved to the active label upon selection.)
 
   attr :value, :any, doc: "used to manually set a selection - overrides any values from the form.
   Must be a single element in `:single` mode, or a list of elements in `:tags` mode."
diff --git a/lib/live_select/component.ex b/lib/live_select/component.ex
index 2272b90..1f7e916 100644
--- a/lib/live_select/component.ex
+++ b/lib/live_select/component.ex
@@ -20,7 +20,7 @@ defmodule LiveSelect.Component do
     clear_tag_button_class: nil,
     clear_tag_button_extra_class: nil,
     keep_options_on_select: false,
-    restore_on_focus: false,
+    keep_label_on_select: false,
     current_text: "",
     user_defined_options: false,
     container_class: nil,
@@ -220,7 +220,7 @@ defmodule LiveSelect.Component do
   @impl true
   def handle_event(event, _params, socket) when event in ~w(focus click) do
     restore =
-      socket.assigns.restore_on_focus &&
+      socket.assigns.keep_label_on_select &&
         socket.assigns.mode == :single &&
         socket.assigns.selection != []
 
diff --git a/lib/support/live_select_web/live/showcase_live.ex b/lib/support/live_select_web/live/showcase_live.ex
index 4fa8da1..c5571e0 100644
--- a/lib/support/live_select_web/live/showcase_live.ex
+++ b/lib/support/live_select_web/live/showcase_live.ex
@@ -76,7 +76,9 @@ defmodule LiveSelectWeb.ShowcaseLive do
         default: Component.default_opts()[:keep_options_on_select]
       )
 
-      field(:restore_on_focus, :boolean, default: Component.default_opts()[:restore_on_focus])
+      field(:keep_label_on_select, :boolean,
+        default: Component.default_opts()[:keep_label_on_select]
+      )
 
       field(:mode, Ecto.Enum,
         values: [:single, :tags, :quick_tags],
@@ -108,7 +110,7 @@ defmodule LiveSelectWeb.ShowcaseLive do
           :disabled,
           :options_styled_as_checkboxes,
           :keep_options_on_select,
-          :restore_on_focus,
+          :keep_label_on_select,
           :max_selectable,
           :user_defined_options,
           :mode,
@@ -149,7 +151,7 @@ defmodule LiveSelectWeb.ShowcaseLive do
           (settings.mode == :single && option == :max_selectable) ||
           (settings.mode != :single && option == :allow_clear) ||
           (settings.mode == :quick_tags && option == :keep_options_on_select) ||
-          (settings.mode != :single && option == :restore_on_focus)
+          (settings.mode != :single && option == :keep_label_on_select)
       end)
       |> Keyword.new()
     end
diff --git a/lib/support/live_select_web/live/showcase_live.html.heex b/lib/support/live_select_web/live/showcase_live.html.heex
index 6e92b15..25a9581 100644
--- a/lib/support/live_select_web/live/showcase_live.html.heex
+++ b/lib/support/live_select_web/live/showcase_live.html.heex
@@ -75,8 +75,8 @@
               )}
             </label>
             <label class="label cursor-pointer">
-              <span class="label-text mr-1">Restore on focus:</span>
-              {checkbox(@settings_form, :restore_on_focus,
+              <span class="label-text mr-1">Keep label on select:</span>
+              {checkbox(@settings_form, :keep_label_on_select,
                 class: "toggle",
                 disabled: to_string(@settings_form[:mode].value) != "single"
               )}
diff --git a/test/live_select_test.exs b/test/live_select_test.exs
index cbe3479..a2ec5c7 100644
--- a/test/live_select_test.exs
+++ b/test/live_select_test.exs
@@ -1214,11 +1214,11 @@ defmodule LiveSelectTest do
     refute_selected(live)
   end
 
-  describe "when restore_on_focus = true" do
+  describe "when keep_label_on_select = true" do
     setup %{conn: conn} do
       stub_options(A: 1, B: 2, C: 3)
 
-      {:ok, live, _html} = live(conn, "/?restore_on_focus=true")
+      {:ok, live, _html} = live(conn, "/?keep_label_on_select=true")
 
       type(live, "ABC")
       select_nth_option(live, 2)
@@ -1294,7 +1294,7 @@ defmodule LiveSelectTest do
     test "without a selection, focus behaves as default", %{conn: conn} do
       stub_options(A: 1, B: 2, C: 3)
 
-      {:ok, live, _html} = live(conn, "/?restore_on_focus=true")
+      {:ok, live, _html} = live(conn, "/?keep_label_on_select=true")
 
       type(live, "ABC")
 

From a9126e41db2458ce55882b91158b9da081ee884c Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Fri, 20 Feb 2026 11:06:06 +0800
Subject: [PATCH 04/10] build js package

---
 priv/static/live_select.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/priv/static/live_select.min.js b/priv/static/live_select.min.js
index a799072..29da02a 100644
--- a/priv/static/live_select.min.js
+++ b/priv/static/live_select.min.js
@@ -1 +1 @@
-function o(e,t){let i;return(...s)=>{clearTimeout(i),i=setTimeout(()=>{e.apply(this,s)},t)}}export default{LiveSelect:{textInput(){return this.el.querySelector("input[type=text]")},debounceMsec(){return parseInt(this.el.dataset.debounce)},updateMinLen(){return parseInt(this.el.dataset.updateMinLen)},maybeStyleClearButtons(){const e=this.el.querySelector("button.ls-clear-button");e&&(this.textInput().parentElement.style.position="relative",this.textInput().parentElement.style.display="flex",this.textInput().parentElement.style.alignItems="center",e.style.minHeight="20px",e.style.minWidth="20px",e.style.position="absolute",e.style.right="5px",e.style.display="block"),this.el.querySelectorAll("button.ls-clear-tag-button").forEach(t=>{t.style.minHeight="20px",t.style.minWidth="20px"})},pushEventToParent(e,t){const i=this.el.dataset.phxTarget;i?this.pushEventTo(i,e,t):this.pushEvent(e,t)},attachDomEventHandlers(){this.textInput().onkeydown=t=>{t.code==="Enter"&&t.preventDefault(),this.pushEventTo(this.el,"keydown",{key:t.code})},this.changeEvents=o((t,i,s)=>{this.pushEventTo(this.el,"change",{text:s}),this.pushEventToParent("live_select_change",{id:this.el.id,field:i,text:s})},this.debounceMsec()),this.textInput().oninput=t=>{const i=t.target.value.trim(),s=this.el.dataset.field;i.length>=this.updateMinLen()?this.changeEvents(this.el.id,s,i):this.pushEventTo(this.el,"options_clear",{})};const e=this.el.querySelector("ul");e&&(e.onmousedown=t=>{const i=t.target.closest("div[data-idx]");i&&(this.pushEventTo(this.el,"option_click",{idx:i.dataset.idx}),t.preventDefault())}),this.el.querySelectorAll("button[data-idx]").forEach(t=>{t.onclick=i=>{this.pushEventTo(this.el,"option_remove",{idx:t.dataset.idx})}})},setInputValue(e){this.textInput().value=e},inputEvent(e,t){const i=t==="single"?"input.single-mode":e.length===0?"input[data-live-select-empty]":"input[type=hidden]";this.el.querySelector(i).dispatchEvent(new Event("input",{bubbles:!0}))},mounted(){this.maybeStyleClearButtons(),this.handleEvent("select",({id:e,selection:t,mode:i,current_text:s,input_event:l,parent_event:n})=>{this.el.id===e&&(this.selection=t,s!=null&&this.setInputValue(s),l&&this.inputEvent(t,i),n&&this.pushEventToParent(n,{id:e}))}),this.handleEvent("scroll_to_option",({id:e,idx:t})=>{if(this.el.id===e){const i=this.el.querySelector(`div[data-idx="${t}"]`);i&&i.scrollIntoView({block:"nearest",behavior:"instant",container:"nearest"})}}),this.attachDomEventHandlers()},updated(){this.maybeStyleClearButtons(),this.attachDomEventHandlers()},reconnected(){this.selection&&this.selection.length>0&&this.pushEventTo(this.el,"selection_recovery",this.selection)}}};
+function a(e,t){let i;return(...s)=>{clearTimeout(i),i=setTimeout(()=>{e.apply(this,s)},t)}}export default{LiveSelect:{textInput(){return this.el.querySelector("input[type=text]")},debounceMsec(){return parseInt(this.el.dataset.debounce)},updateMinLen(){return parseInt(this.el.dataset.updateMinLen)},maybeStyleClearButtons(){const e=this.el.querySelector("button.ls-clear-button");e&&(this.textInput().parentElement.style.position="relative",this.textInput().parentElement.style.display="flex",this.textInput().parentElement.style.alignItems="center",e.style.minHeight="20px",e.style.minWidth="20px",e.style.position="absolute",e.style.right="5px",e.style.display="block"),this.el.querySelectorAll("button.ls-clear-tag-button").forEach(t=>{t.style.minHeight="20px",t.style.minWidth="20px"})},pushEventToParent(e,t){const i=this.el.dataset.phxTarget;i?this.pushEventTo(i,e,t):this.pushEvent(e,t)},attachDomEventHandlers(){this.textInput().onkeydown=t=>{t.code==="Enter"&&t.preventDefault(),this.pushEventTo(this.el,"keydown",{key:t.code})},this.changeEvents=a((t,i,s)=>{this.pushEventTo(this.el,"change",{text:s}),this.pushEventToParent("live_select_change",{id:this.el.id,field:i,text:s})},this.debounceMsec()),this.textInput().oninput=t=>{const i=t.target.value.trim(),s=this.el.dataset.field;i.length>=this.updateMinLen()?this.changeEvents(this.el.id,s,i):this.pushEventTo(this.el,"options_clear",{})};const e=this.el.querySelector("ul");e&&(e.onmousedown=t=>{const i=t.target.closest("div[data-idx]");i&&(this.pushEventTo(this.el,"option_click",{idx:i.dataset.idx}),t.preventDefault())}),this.el.querySelectorAll("button[data-idx]").forEach(t=>{t.onclick=i=>{this.pushEventTo(this.el,"option_remove",{idx:t.dataset.idx})}})},setInputValue(e){this.textInput().value=e},inputEvent(e,t){const i=t==="single"?"input.single-mode":e.length===0?"input[data-live-select-empty]":"input[type=hidden]";this.el.querySelector(i).dispatchEvent(new Event("input",{bubbles:!0}))},mounted(){this.maybeStyleClearButtons(),this.handleEvent("select",({id:e,selection:t,mode:i,current_text:s,input_event:l,parent_event:n,trigger_change:h})=>{if(this.el.id===e&&(this.selection=t,s!=null&&this.setInputValue(s),l&&this.inputEvent(t,i),n&&this.pushEventToParent(n,{id:e}),h)){const o=this.el.dataset.field;this.pushEventTo(this.el,"change",{text:s}),this.pushEventToParent("live_select_change",{id:this.el.id,field:o,text:s})}}),this.handleEvent("scroll_to_option",({id:e,idx:t})=>{if(this.el.id===e){const i=this.el.querySelector(`div[data-idx="${t}"]`);i&&i.scrollIntoView({block:"nearest",behavior:"instant",container:"nearest"})}}),this.attachDomEventHandlers()},updated(){this.maybeStyleClearButtons(),this.attachDomEventHandlers()},reconnected(){this.selection&&this.selection.length>0&&this.pushEventTo(this.el,"selection_recovery",this.selection)}}};

From f527682586d14a2f77b017f80db3ac198e756cb6 Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Fri, 20 Feb 2026 12:33:27 +0800
Subject: [PATCH 05/10] fix racing conditions

---
 lib/live_select/component.ex |  2 +-
 test/live_select_test.exs    | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/lib/live_select/component.ex b/lib/live_select/component.ex
index 1f7e916..a9290cc 100644
--- a/lib/live_select/component.ex
+++ b/lib/live_select/component.ex
@@ -238,7 +238,7 @@ defmodule LiveSelect.Component do
       |> assign(current_text: current_text)
       |> client_select(%{
         input_event: false,
-        parent_event: socket.assigns[:"phx-focus"],
+        parent_event: if(!trigger_change, do: socket.assigns[:"phx-focus"]),
         current_text: current_text,
         trigger_change: trigger_change
       })
diff --git a/test/live_select_test.exs b/test/live_select_test.exs
index a2ec5c7..69e68bf 100644
--- a/test/live_select_test.exs
+++ b/test/live_select_test.exs
@@ -1303,5 +1303,25 @@ defmodule LiveSelectTest do
 
       assert_set_text_field(live, "ABC")
     end
+
+    test "trigger_change suppresses phx-focus parent_event", %{conn: conn} do
+      stub_options(A: 1, B: 2, C: 3)
+
+      {:ok, live, _html} =
+        live(conn, "/?keep_label_on_select=true&phx-focus=focus-event-for-parent")
+
+      type(live, "ABC")
+      select_nth_option(live, 2)
+      assert_selected(live, :B, 2)
+
+      element(live, selectors()[:text_input])
+      |> render_focus()
+
+      assert_push_event(live, "select", %{
+        id: "my_form_city_search_live_select_component",
+        trigger_change: true,
+        parent_event: nil
+      })
+    end
   end
 end

From 51c4674b0856d85338134b79f9e365bfedde9c69 Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Fri, 20 Feb 2026 12:39:23 +0800
Subject: [PATCH 06/10] clear options when keep_label_on_select is true, test

---
 lib/live_select/component.ex | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/lib/live_select/component.ex b/lib/live_select/component.ex
index a9290cc..245b121 100644
--- a/lib/live_select/component.ex
+++ b/lib/live_select/component.ex
@@ -204,6 +204,13 @@ defmodule LiveSelect.Component do
     socket =
       socket
       |> assign(:hide_dropdown, true)
+      |> then(fn socket ->
+        if socket.assigns.keep_label_on_select && socket.assigns.mode == :single do
+          clear_options(socket)
+        else
+          socket
+        end
+      end)
       |> client_select(%{
         parent_event: socket.assigns[:"phx-blur"],
         current_text:

From 7f84c90cb0c5490d6d2d297bcb49ac622b3ddd27 Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Fri, 20 Feb 2026 12:42:02 +0800
Subject: [PATCH 07/10] wrong scope, fix trigger_change conditions

---
 lib/live_select/component.ex | 9 +--------
 test/live_select_test.exs    | 4 ++--
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/lib/live_select/component.ex b/lib/live_select/component.ex
index 245b121..c7d90c0 100644
--- a/lib/live_select/component.ex
+++ b/lib/live_select/component.ex
@@ -204,13 +204,6 @@ defmodule LiveSelect.Component do
     socket =
       socket
       |> assign(:hide_dropdown, true)
-      |> then(fn socket ->
-        if socket.assigns.keep_label_on_select && socket.assigns.mode == :single do
-          clear_options(socket)
-        else
-          socket
-        end
-      end)
       |> client_select(%{
         parent_event: socket.assigns[:"phx-blur"],
         current_text:
@@ -238,7 +231,7 @@ defmodule LiveSelect.Component do
         socket.assigns.current_text
       end
 
-    trigger_change = restore && Enum.empty?(socket.assigns.options)
+    trigger_change = restore
 
     socket =
       socket
diff --git a/test/live_select_test.exs b/test/live_select_test.exs
index 69e68bf..b6ae1fc 100644
--- a/test/live_select_test.exs
+++ b/test/live_select_test.exs
@@ -1277,7 +1277,7 @@ defmodule LiveSelectTest do
       assert_selected_static(live, :B, 2)
     end
 
-    test "does not trigger_change when options are present", %{live: live} do
+    test "trigger_change is sent even when options are present", %{live: live} do
       stub_options(A: 1, B: 2, C: 3)
       type(live, "ABC")
 
@@ -1287,7 +1287,7 @@ defmodule LiveSelectTest do
       assert_push_event(live, "select", %{
         id: "my_form_city_search_live_select_component",
         current_text: :B,
-        trigger_change: false
+        trigger_change: true
       })
     end
 

From 15bbb483199555eadc129767e484a583210287e1 Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Fri, 20 Feb 2026 14:33:22 +0800
Subject: [PATCH 08/10] clear the current_text when called

---
 lib/live_select/component.ex | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/live_select/component.ex b/lib/live_select/component.ex
index c7d90c0..443add4 100644
--- a/lib/live_select/component.ex
+++ b/lib/live_select/component.ex
@@ -559,8 +559,8 @@ defmodule LiveSelect.Component do
 
   defp clear(socket, params) do
     socket
-    |> assign(selection: [])
-    |> client_select(params)
+    |> assign(selection: [], current_text: "")
+    |> client_select(Map.put(params, :current_text, ""))
   end
 
   defp clear_options(socket) do

From 7ef4217018c9b6d0fe680985e07f45643b7aa4fc Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Fri, 20 Feb 2026 15:00:12 +0800
Subject: [PATCH 09/10] trying a new behaviour

---
 assets/js/live_select.js     |  7 +------
 lib/live_select/component.ex | 15 ++++++---------
 test/live_select_test.exs    | 37 +++++++-----------------------------
 3 files changed, 14 insertions(+), 45 deletions(-)

diff --git a/assets/js/live_select.js b/assets/js/live_select.js
index fb531b4..d105f35 100644
--- a/assets/js/live_select.js
+++ b/assets/js/live_select.js
@@ -89,7 +89,7 @@ export default {
         },
         mounted() {
             this.maybeStyleClearButtons()
-            this.handleEvent("select", ({ id, selection, mode, current_text, input_event, parent_event, trigger_change }) => {
+            this.handleEvent("select", ({ id, selection, mode, current_text, input_event, parent_event }) => {
                 if (this.el.id === id) {
                     this.selection = selection
                     if (current_text != null) {
@@ -101,11 +101,6 @@ export default {
                     if (parent_event) {
                         this.pushEventToParent(parent_event, { id })
                     }
-                    if (trigger_change) {
-                        const field = this.el.dataset['field']
-                        this.pushEventTo(this.el, "change", { text: current_text })
-                        this.pushEventToParent("live_select_change", { id: this.el.id, field, text: current_text })
-                    }
                 }
             })
             this.handleEvent("scroll_to_option", ({ id, idx }) => {
diff --git a/lib/live_select/component.ex b/lib/live_select/component.ex
index 443add4..9cadd07 100644
--- a/lib/live_select/component.ex
+++ b/lib/live_select/component.ex
@@ -219,28 +219,25 @@ defmodule LiveSelect.Component do
 
   @impl true
   def handle_event(event, _params, socket) when event in ~w(focus click) do
-    restore =
+    keep_label_on_select =
       socket.assigns.keep_label_on_select &&
         socket.assigns.mode == :single &&
         socket.assigns.selection != []
 
-    current_text =
-      if restore do
+    display_text =
+      if keep_label_on_select do
         List.first(socket.assigns.selection).label
       else
         socket.assigns.current_text
       end
 
-    trigger_change = restore
-
     socket =
       socket
-      |> assign(current_text: current_text)
+      |> assign(current_text: if(keep_label_on_select, do: "", else: socket.assigns.current_text))
       |> client_select(%{
         input_event: false,
-        parent_event: if(!trigger_change, do: socket.assigns[:"phx-focus"]),
-        current_text: current_text,
-        trigger_change: trigger_change
+        parent_event: socket.assigns[:"phx-focus"],
+        current_text: display_text
       })
       |> assign(hide_dropdown: false)
 
diff --git a/test/live_select_test.exs b/test/live_select_test.exs
index b6ae1fc..d508d2d 100644
--- a/test/live_select_test.exs
+++ b/test/live_select_test.exs
@@ -1227,31 +1227,20 @@ defmodule LiveSelectTest do
       %{live: live}
     end
 
-    test "on focus, the text input is set to the selected label", %{live: live} do
+    test "on focus, the text input displays the selected label", %{live: live} do
       element(live, selectors()[:text_input])
       |> render_focus()
 
       assert_set_text_field(live, :B)
     end
 
-    test "on click, the text input is set to the selected label", %{live: live} do
+    test "on click, the text input displays the selected label", %{live: live} do
       element(live, selectors()[:text_input])
       |> render_click()
 
       assert_set_text_field(live, :B)
     end
 
-    test "on focus with cleared options, trigger_change is sent", %{live: live} do
-      element(live, selectors()[:text_input])
-      |> render_focus()
-
-      assert_push_event(live, "select", %{
-        id: "my_form_city_search_live_select_component",
-        current_text: :B,
-        trigger_change: true
-      })
-    end
-
     test "on blur, the text input is restored to the selected label", %{live: live} do
       element(live, selectors()[:text_input])
       |> render_focus()
@@ -1266,6 +1255,8 @@ defmodule LiveSelectTest do
       element(live, selectors()[:text_input])
       |> render_blur()
 
+      assert_set_text_field(live, :B)
+
       element(live, selectors()[:text_input])
       |> render_focus()
 
@@ -1277,20 +1268,6 @@ defmodule LiveSelectTest do
       assert_selected_static(live, :B, 2)
     end
 
-    test "trigger_change is sent even when options are present", %{live: live} do
-      stub_options(A: 1, B: 2, C: 3)
-      type(live, "ABC")
-
-      element(live, selectors()[:text_input])
-      |> render_focus()
-
-      assert_push_event(live, "select", %{
-        id: "my_form_city_search_live_select_component",
-        current_text: :B,
-        trigger_change: true
-      })
-    end
-
     test "without a selection, focus behaves as default", %{conn: conn} do
       stub_options(A: 1, B: 2, C: 3)
 
@@ -1304,7 +1281,7 @@ defmodule LiveSelectTest do
       assert_set_text_field(live, "ABC")
     end
 
-    test "trigger_change suppresses phx-focus parent_event", %{conn: conn} do
+    test "phx-focus parent_event fires normally on focus", %{conn: conn} do
       stub_options(A: 1, B: 2, C: 3)
 
       {:ok, live, _html} =
@@ -1319,8 +1296,8 @@ defmodule LiveSelectTest do
 
       assert_push_event(live, "select", %{
         id: "my_form_city_search_live_select_component",
-        trigger_change: true,
-        parent_event: nil
+        current_text: :B,
+        parent_event: "focus-event-for-parent"
       })
     end
   end

From fc9a6b41b710c653cbc236d1c8ff853783b5abe7 Mon Sep 17 00:00:00 2001
From: RisPNG <ris@poppybit.com>
Date: Fri, 20 Feb 2026 15:34:56 +0800
Subject: [PATCH 10/10] revert js as no changes are needed here

---
 priv/static/live_select.min.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/priv/static/live_select.min.js b/priv/static/live_select.min.js
index 29da02a..a799072 100644
--- a/priv/static/live_select.min.js
+++ b/priv/static/live_select.min.js
@@ -1 +1 @@
-function a(e,t){let i;return(...s)=>{clearTimeout(i),i=setTimeout(()=>{e.apply(this,s)},t)}}export default{LiveSelect:{textInput(){return this.el.querySelector("input[type=text]")},debounceMsec(){return parseInt(this.el.dataset.debounce)},updateMinLen(){return parseInt(this.el.dataset.updateMinLen)},maybeStyleClearButtons(){const e=this.el.querySelector("button.ls-clear-button");e&&(this.textInput().parentElement.style.position="relative",this.textInput().parentElement.style.display="flex",this.textInput().parentElement.style.alignItems="center",e.style.minHeight="20px",e.style.minWidth="20px",e.style.position="absolute",e.style.right="5px",e.style.display="block"),this.el.querySelectorAll("button.ls-clear-tag-button").forEach(t=>{t.style.minHeight="20px",t.style.minWidth="20px"})},pushEventToParent(e,t){const i=this.el.dataset.phxTarget;i?this.pushEventTo(i,e,t):this.pushEvent(e,t)},attachDomEventHandlers(){this.textInput().onkeydown=t=>{t.code==="Enter"&&t.preventDefault(),this.pushEventTo(this.el,"keydown",{key:t.code})},this.changeEvents=a((t,i,s)=>{this.pushEventTo(this.el,"change",{text:s}),this.pushEventToParent("live_select_change",{id:this.el.id,field:i,text:s})},this.debounceMsec()),this.textInput().oninput=t=>{const i=t.target.value.trim(),s=this.el.dataset.field;i.length>=this.updateMinLen()?this.changeEvents(this.el.id,s,i):this.pushEventTo(this.el,"options_clear",{})};const e=this.el.querySelector("ul");e&&(e.onmousedown=t=>{const i=t.target.closest("div[data-idx]");i&&(this.pushEventTo(this.el,"option_click",{idx:i.dataset.idx}),t.preventDefault())}),this.el.querySelectorAll("button[data-idx]").forEach(t=>{t.onclick=i=>{this.pushEventTo(this.el,"option_remove",{idx:t.dataset.idx})}})},setInputValue(e){this.textInput().value=e},inputEvent(e,t){const i=t==="single"?"input.single-mode":e.length===0?"input[data-live-select-empty]":"input[type=hidden]";this.el.querySelector(i).dispatchEvent(new Event("input",{bubbles:!0}))},mounted(){this.maybeStyleClearButtons(),this.handleEvent("select",({id:e,selection:t,mode:i,current_text:s,input_event:l,parent_event:n,trigger_change:h})=>{if(this.el.id===e&&(this.selection=t,s!=null&&this.setInputValue(s),l&&this.inputEvent(t,i),n&&this.pushEventToParent(n,{id:e}),h)){const o=this.el.dataset.field;this.pushEventTo(this.el,"change",{text:s}),this.pushEventToParent("live_select_change",{id:this.el.id,field:o,text:s})}}),this.handleEvent("scroll_to_option",({id:e,idx:t})=>{if(this.el.id===e){const i=this.el.querySelector(`div[data-idx="${t}"]`);i&&i.scrollIntoView({block:"nearest",behavior:"instant",container:"nearest"})}}),this.attachDomEventHandlers()},updated(){this.maybeStyleClearButtons(),this.attachDomEventHandlers()},reconnected(){this.selection&&this.selection.length>0&&this.pushEventTo(this.el,"selection_recovery",this.selection)}}};
+function o(e,t){let i;return(...s)=>{clearTimeout(i),i=setTimeout(()=>{e.apply(this,s)},t)}}export default{LiveSelect:{textInput(){return this.el.querySelector("input[type=text]")},debounceMsec(){return parseInt(this.el.dataset.debounce)},updateMinLen(){return parseInt(this.el.dataset.updateMinLen)},maybeStyleClearButtons(){const e=this.el.querySelector("button.ls-clear-button");e&&(this.textInput().parentElement.style.position="relative",this.textInput().parentElement.style.display="flex",this.textInput().parentElement.style.alignItems="center",e.style.minHeight="20px",e.style.minWidth="20px",e.style.position="absolute",e.style.right="5px",e.style.display="block"),this.el.querySelectorAll("button.ls-clear-tag-button").forEach(t=>{t.style.minHeight="20px",t.style.minWidth="20px"})},pushEventToParent(e,t){const i=this.el.dataset.phxTarget;i?this.pushEventTo(i,e,t):this.pushEvent(e,t)},attachDomEventHandlers(){this.textInput().onkeydown=t=>{t.code==="Enter"&&t.preventDefault(),this.pushEventTo(this.el,"keydown",{key:t.code})},this.changeEvents=o((t,i,s)=>{this.pushEventTo(this.el,"change",{text:s}),this.pushEventToParent("live_select_change",{id:this.el.id,field:i,text:s})},this.debounceMsec()),this.textInput().oninput=t=>{const i=t.target.value.trim(),s=this.el.dataset.field;i.length>=this.updateMinLen()?this.changeEvents(this.el.id,s,i):this.pushEventTo(this.el,"options_clear",{})};const e=this.el.querySelector("ul");e&&(e.onmousedown=t=>{const i=t.target.closest("div[data-idx]");i&&(this.pushEventTo(this.el,"option_click",{idx:i.dataset.idx}),t.preventDefault())}),this.el.querySelectorAll("button[data-idx]").forEach(t=>{t.onclick=i=>{this.pushEventTo(this.el,"option_remove",{idx:t.dataset.idx})}})},setInputValue(e){this.textInput().value=e},inputEvent(e,t){const i=t==="single"?"input.single-mode":e.length===0?"input[data-live-select-empty]":"input[type=hidden]";this.el.querySelector(i).dispatchEvent(new Event("input",{bubbles:!0}))},mounted(){this.maybeStyleClearButtons(),this.handleEvent("select",({id:e,selection:t,mode:i,current_text:s,input_event:l,parent_event:n})=>{this.el.id===e&&(this.selection=t,s!=null&&this.setInputValue(s),l&&this.inputEvent(t,i),n&&this.pushEventToParent(n,{id:e}))}),this.handleEvent("scroll_to_option",({id:e,idx:t})=>{if(this.el.id===e){const i=this.el.querySelector(`div[data-idx="${t}"]`);i&&i.scrollIntoView({block:"nearest",behavior:"instant",container:"nearest"})}}),this.attachDomEventHandlers()},updated(){this.maybeStyleClearButtons(),this.attachDomEventHandlers()},reconnected(){this.selection&&this.selection.length>0&&this.pushEventTo(this.el,"selection_recovery",this.selection)}}};