Bugfix: ComboBox navigation with creatable on top (#3316)

* Bugfix: ComboBox navigation with creatable on top

* !fixup

* !fixup

* !fixup

* !fixup
This commit is contained in:
hq1 2023-09-04 14:56:31 +02:00 committed by GitHub
parent d22c011aa3
commit b2df714bdb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 45 deletions

View File

@ -165,7 +165,7 @@ defmodule PlausibleWeb.Live.Components.ComboBox do
> >
<.option <.option
:if={display_creatable_option?(assigns)} :if={display_creatable_option?(assigns)}
idx={length(@suggestions)} idx={0}
submit_value={@display_value} submit_value={@display_value}
display_value={@display_value} display_value={@display_value}
target={@target} target={@target}
@ -178,7 +178,7 @@ defmodule PlausibleWeb.Live.Components.ComboBox do
{{submit_value, display_value}, idx} <- {{submit_value, display_value}, idx} <-
Enum.with_index( Enum.with_index(
@suggestions, @suggestions,
fn {option_value, option}, idx -> {{option_value, to_string(option)}, idx} end fn {option_value, option}, idx -> {{option_value, to_string(option)}, idx + 1} end
) )
} }
:if={@suggestions != []} :if={@suggestions != []}
@ -230,7 +230,7 @@ defmodule PlausibleWeb.Live.Components.ComboBox do
<% end %> <% end %>
</a> </a>
</li> </li>
<li :if={@idx == @suggestions_limit - 1} class="text-xs text-gray-500 relative py-2 px-3"> <li :if={@idx == @suggestions_limit} class="text-xs text-gray-500 relative py-2 px-3">
Max results reached. Refine your search by typing in goal name. Max results reached. Refine your search by typing in goal name.
</li> </li>
""" """

View File

@ -50,11 +50,11 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
li1 = doc |> find(suggestion_li(1)) |> List.first() li1 = doc |> find(suggestion_li(1)) |> List.first()
li2 = doc |> find(suggestion_li(2)) |> List.first() li2 = doc |> find(suggestion_li(2)) |> List.first()
assert text_of_attr(li1, "@mouseenter") == "setFocus(0)" assert text_of_attr(li1, "@mouseenter") == "setFocus(1)"
assert text_of_attr(li2, "@mouseenter") == "setFocus(1)" assert text_of_attr(li2, "@mouseenter") == "setFocus(2)"
assert text_of_attr(li1, "x-bind:class") =~ "focus === 0" assert text_of_attr(li1, "x-bind:class") =~ "focus === 1"
assert text_of_attr(li2, "x-bind:class") =~ "focus === 1" assert text_of_attr(li2, "x-bind:class") =~ "focus === 2"
end end
test "Alpine.js: component refers to window.suggestionsDropdown" do test "Alpine.js: component refers to window.suggestionsDropdown" do
@ -113,12 +113,12 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
display_value: "Brazilian Real" display_value: "Brazilian Real"
) )
assert text_of_element(doc, "#dropdown-test-component-option-0") == "US Dollar" assert text_of_element(doc, "#dropdown-test-component-option-0") ==
assert text_of_element(doc, "#dropdown-test-component-option-1") == "Euro"
assert text_of_element(doc, "#dropdown-test-component-option-2") ==
~s(Create "Brazilian Real") ~s(Create "Brazilian Real")
assert text_of_element(doc, "#dropdown-test-component-option-1") == "US Dollar"
assert text_of_element(doc, "#dropdown-test-component-option-2") == "Euro"
refute text_of_element(doc, "#dropdown-test-component") == refute text_of_element(doc, "#dropdown-test-component") ==
"No matches found. Try searching for something different." "No matches found. Try searching for something different."
end end
@ -166,7 +166,7 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
test "uses the suggestions module", %{conn: conn} do test "uses the suggestions module", %{conn: conn} do
{:ok, lv, _html} = live_isolated(conn, SampleView, session: %{}) {:ok, lv, _html} = live_isolated(conn, SampleView, session: %{})
doc = type_into_combo(lv, "test-component", "Echo me") doc = type_into_combo(lv, "test-component", "Echo me")
assert text_of_element(doc, "#dropdown-test-component-option-0") == "Echo me" assert text_of_element(doc, "#dropdown-test-component-option-1") == "Echo me"
end end
test "stores selected value", %{conn: conn} do test "stores selected value", %{conn: conn} do
@ -175,7 +175,7 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
doc = doc =
lv lv
|> element("li#dropdown-test-component-option-0 a") |> element("li#dropdown-test-component-option-1 a")
|> render_click() |> render_click()
assert element_exists?(doc, "input[type=hidden][name=some_submit_name][value=20]") assert element_exists?(doc, "input[type=hidden][name=some_submit_name][value=20]")
@ -225,7 +225,7 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
doc = doc =
lv lv
|> element("li#dropdown-test-creatable-component-option-0 a") |> element("li#dropdown-test-creatable-component-option-1 a")
|> render_click() |> render_click()
assert element_exists?(doc, "input[type=hidden][name=some_submit_name][value=20]") assert element_exists?(doc, "input[type=hidden][name=some_submit_name][value=20]")
@ -245,7 +245,7 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
assert lv assert lv
|> type_into_combo("test-creatable-component", "Option 1") |> type_into_combo("test-creatable-component", "Option 1")
|> text_of_element("li#dropdown-test-creatable-component-option-0 a") == ~s(Option 1) |> text_of_element("li#dropdown-test-creatable-component-option-1 a") == ~s(Option 1)
end end
test "stores new value by clicking on the dropdown custom option", %{conn: conn} do test "stores new value by clicking on the dropdown custom option", %{conn: conn} do
@ -314,27 +314,27 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
async: true async: true
) )
refute element_exists?(doc, "#dropdown-test-component-option-0") refute element_exists?(doc, "#dropdown-test-component-option-1")
end end
test "pre-fills the suggestions asynchronously", %{conn: conn} do test "pre-fills the suggestions asynchronously", %{conn: conn} do
{:ok, lv, doc} = live_isolated(conn, SampleViewAsync, session: %{}) {:ok, lv, doc} = live_isolated(conn, SampleViewAsync, session: %{})
refute element_exists?(doc, "#dropdown-test-component-option-0") refute element_exists?(doc, "#dropdown-test-component-option-1")
:timer.sleep(1000) :timer.sleep(1000)
doc = render(lv) doc = render(lv)
assert text_of_element(doc, "#dropdown-test-component-option-0") == "One" assert text_of_element(doc, "#dropdown-test-component-option-1") == "One"
assert text_of_element(doc, "#dropdown-test-component-option-1") == "Two" assert text_of_element(doc, "#dropdown-test-component-option-2") == "Two"
assert text_of_element(doc, "#dropdown-test-component-option-2") == "Three" assert text_of_element(doc, "#dropdown-test-component-option-3") == "Three"
end end
test "uses the suggestions function asynchronously", %{conn: conn} do test "uses the suggestions function asynchronously", %{conn: conn} do
{:ok, lv, _html} = live_isolated(conn, SampleViewAsync, session: %{}) {:ok, lv, _html} = live_isolated(conn, SampleViewAsync, session: %{})
doc = type_into_combo(lv, "test-component", "Echo me") doc = type_into_combo(lv, "test-component", "Echo me")
refute element_exists?(doc, "#dropdown-test-component-option-0") refute element_exists?(doc, "#dropdown-test-component-option-1")
:timer.sleep(1000) :timer.sleep(1000)
doc = render(lv) doc = render(lv)
assert element_exists?(doc, "#dropdown-test-component-option-0") assert element_exists?(doc, "#dropdown-test-component-option-1")
assert text_of_element(doc, "#dropdown-test-component-option-0") == "Echo me" assert text_of_element(doc, "#dropdown-test-component-option-1") == "Echo me"
end end
end end
@ -358,7 +358,7 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
end end
defp suggestion_li(idx) do defp suggestion_li(idx) do
~s/#{@ul} li#dropdown-test-component-option-#{idx - 1}/ ~s/#{@ul} li#dropdown-test-component-option-#{idx}/
end end
defp type_into_combo(lv, id, text) do defp type_into_combo(lv, id, text) do

View File

@ -12,11 +12,11 @@ defmodule PlausibleWeb.Live.FunnelSettings.FormTest do
doc = type_into_combo(lv, 1, "hello") doc = type_into_combo(lv, 1, "hello")
assert text_of_element(doc, "#dropdown-step-1-option-0") == "Hello World" assert text_of_element(doc, "#dropdown-step-1-option-1") == "Hello World"
doc = type_into_combo(lv, 1, "plausible") doc = type_into_combo(lv, 1, "plausible")
assert text_of_element(doc, "#dropdown-step-1-option-0") == "Plausible" assert text_of_element(doc, "#dropdown-step-1-option-1") == "Plausible"
end end
test "selecting an option prefills input values", %{conn: conn, site: site} do test "selecting an option prefills input values", %{conn: conn, site: site} do
@ -29,7 +29,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.FormTest do
refute element_exists?(doc, ~s/input[type="text"][value="Another World"]/) refute element_exists?(doc, ~s/input[type="text"][value="Another World"]/)
lv lv
|> element("li#dropdown-step-1-option-0 a") |> element("li#dropdown-step-1-option-1 a")
|> render_click() |> render_click()
assert lv assert lv
@ -50,7 +50,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.FormTest do
type_into_combo(lv, 1, "another") type_into_combo(lv, 1, "another")
lv lv
|> element("li#dropdown-step-1-option-0 a") |> element("li#dropdown-step-1-option-1 a")
|> render_click() |> render_click()
doc = type_into_combo(lv, 2, "another") doc = type_into_combo(lv, 2, "another")
@ -65,11 +65,11 @@ defmodule PlausibleWeb.Live.FunnelSettings.FormTest do
doc = doc =
lv lv
|> element("li#dropdown-step-1-option-0 a") |> element("li#dropdown-step-1-option-1 a")
|> render_click() |> render_click()
assert element_exists?(doc, ~s/#li#dropdown-step-1-option-14/) assert element_exists?(doc, ~s/#li#dropdown-step-1-option-15/)
refute element_exists?(doc, ~s/#li#dropdown-step-1-option-15/) refute element_exists?(doc, ~s/#li#dropdown-step-1-option-16/)
end end
test "removing one option alters suggestions for other", %{conn: conn, site: site} do test "removing one option alters suggestions for other", %{conn: conn, site: site} do
@ -82,12 +82,12 @@ defmodule PlausibleWeb.Live.FunnelSettings.FormTest do
type_into_combo(lv, 2, "hello") type_into_combo(lv, 2, "hello")
lv lv
|> element("li#dropdown-step-2-option-0 a") |> element("li#dropdown-step-2-option-1 a")
|> render_click() |> render_click()
doc = type_into_combo(lv, 1, "hello") doc = type_into_combo(lv, 1, "hello")
refute text_of_element(doc, "ul#dropdown-step-1 li") =~ "Hello World" refute text_of_element(doc, "ul#dropdown-step-0 li") =~ "Hello World"
lv |> element(~s/#remove-step-2/) |> render_click() lv |> element(~s/#remove-step-2/) |> render_click()

View File

@ -165,12 +165,12 @@ defmodule PlausibleWeb.Live.FunnelSettingsTest do
assert lv = find_live_child(lv, "funnels-form") assert lv = find_live_child(lv, "funnels-form")
lv lv
|> element("li#dropdown-step-1-option-0 a") |> element("li#dropdown-step-1-option-1 a")
|> render_click() |> render_click()
doc = doc =
lv lv
|> element("li#dropdown-step-2-option-0 a") |> element("li#dropdown-step-2-option-1 a")
|> render_click() |> render_click()
save_inactive = ~s/form button#save.cursor-not-allowed/ save_inactive = ~s/form button#save.cursor-not-allowed/
@ -207,11 +207,11 @@ defmodule PlausibleWeb.Live.FunnelSettingsTest do
assert lv = find_live_child(lv, "funnels-form") assert lv = find_live_child(lv, "funnels-form")
lv |> element("li#dropdown-step-1-option-0 a") |> render_click() lv |> element("li#dropdown-step-1-option-1 a") |> render_click()
:timer.sleep(1001) :timer.sleep(1001)
lv |> element("li#dropdown-step-2-option-0 a") |> render_click() lv |> element("li#dropdown-step-2-option-1 a") |> render_click()
doc = lv |> element("#step-eval-0") |> render() doc = lv |> element("#step-eval-0") |> render()
assert text_of_element(doc, ~s/#step-eval-0/) =~ "Entering Visitors: 0" assert text_of_element(doc, ~s/#step-eval-0/) =~ "Entering Visitors: 0"

View File

@ -35,13 +35,13 @@ defmodule PlausibleWeb.Live.PropsSettings.FormTest do
test "renders dropdown with suggestions", %{conn: conn, site: site} do test "renders dropdown with suggestions", %{conn: conn, site: site} do
{:ok, _lv, doc} = get_liveview(conn, site) {:ok, _lv, doc} = get_liveview(conn, site)
assert text_of_element(doc, ~s/ul#dropdown-prop_input li#dropdown-prop_input-option-0/) == assert text_of_element(doc, ~s/ul#dropdown-prop_input li#dropdown-prop_input-option-1/) ==
"amount" "amount"
assert text_of_element(doc, ~s/ul#dropdown-prop_input li#dropdown-prop_input-option-1/) == assert text_of_element(doc, ~s/ul#dropdown-prop_input li#dropdown-prop_input-option-2/) ==
"logged_in" "logged_in"
assert text_of_element(doc, ~s/ul#dropdown-prop_input li#dropdown-prop_input-option-2/) == assert text_of_element(doc, ~s/ul#dropdown-prop_input li#dropdown-prop_input-option-3/) ==
"is_customer" "is_customer"
end end
@ -55,7 +55,7 @@ defmodule PlausibleWeb.Live.PropsSettings.FormTest do
doc = doc =
lv lv
|> element(~s/ul#dropdown-prop_input li#dropdown-prop_input-option-0 a/) |> element(~s/ul#dropdown-prop_input li#dropdown-prop_input-option-1 a/)
|> render_click() |> render_click()
assert element_exists?(doc, ~s/input[type="hidden"][value="amount"]/) assert element_exists?(doc, ~s/input[type="hidden"][value="amount"]/)
@ -64,7 +64,7 @@ defmodule PlausibleWeb.Live.PropsSettings.FormTest do
test "saving from suggestion adds to the list", %{conn: conn, site: site} do test "saving from suggestion adds to the list", %{conn: conn, site: site} do
{:ok, lv, _doc} = get_liveview(conn, site) {:ok, lv, _doc} = get_liveview(conn, site)
doc = select_and_submit(lv, 0) doc = select_and_submit(lv, 1)
assert text_of_element(doc, ~s/ul#allowed-props li#prop-0 span/) == "amount" assert text_of_element(doc, ~s/ul#allowed-props li#prop-0 span/) == "amount"
refute doc =~ "No properties configured for this site yet" refute doc =~ "No properties configured for this site yet"
@ -169,9 +169,9 @@ defmodule PlausibleWeb.Live.PropsSettings.FormTest do
} do } do
{:ok, lv, _doc} = get_liveview(conn, site) {:ok, lv, _doc} = get_liveview(conn, site)
_doc = select_and_submit(lv, 0) _doc = select_and_submit(lv, 1)
_doc = select_and_submit(lv, 0) _doc = select_and_submit(lv, 1)
doc = select_and_submit(lv, 0) doc = select_and_submit(lv, 1)
refute element_exists?(doc, ~s/button[phx-click="allow-existing-props"]/) refute element_exists?(doc, ~s/button[phx-click="allow-existing-props"]/)
end end