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
:if={display_creatable_option?(assigns)}
idx={length(@suggestions)}
idx={0}
submit_value={@display_value}
display_value={@display_value}
target={@target}
@ -178,7 +178,7 @@ defmodule PlausibleWeb.Live.Components.ComboBox do
{{submit_value, display_value}, idx} <-
Enum.with_index(
@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 != []}
@ -230,7 +230,7 @@ defmodule PlausibleWeb.Live.Components.ComboBox do
<% end %>
</a>
</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.
</li>
"""

View File

@ -50,11 +50,11 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
li1 = doc |> find(suggestion_li(1)) |> List.first()
li2 = doc |> find(suggestion_li(2)) |> List.first()
assert text_of_attr(li1, "@mouseenter") == "setFocus(0)"
assert text_of_attr(li2, "@mouseenter") == "setFocus(1)"
assert text_of_attr(li1, "@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(li2, "x-bind:class") =~ "focus === 1"
assert text_of_attr(li1, "x-bind:class") =~ "focus === 1"
assert text_of_attr(li2, "x-bind:class") =~ "focus === 2"
end
test "Alpine.js: component refers to window.suggestionsDropdown" do
@ -113,12 +113,12 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
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-1") == "Euro"
assert text_of_element(doc, "#dropdown-test-component-option-2") ==
assert text_of_element(doc, "#dropdown-test-component-option-0") ==
~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") ==
"No matches found. Try searching for something different."
end
@ -166,7 +166,7 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
test "uses the suggestions module", %{conn: conn} do
{:ok, lv, _html} = live_isolated(conn, SampleView, session: %{})
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
test "stores selected value", %{conn: conn} do
@ -175,7 +175,7 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
doc =
lv
|> element("li#dropdown-test-component-option-0 a")
|> element("li#dropdown-test-component-option-1 a")
|> render_click()
assert element_exists?(doc, "input[type=hidden][name=some_submit_name][value=20]")
@ -225,7 +225,7 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
doc =
lv
|> element("li#dropdown-test-creatable-component-option-0 a")
|> element("li#dropdown-test-creatable-component-option-1 a")
|> render_click()
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
|> 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
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
)
refute element_exists?(doc, "#dropdown-test-component-option-0")
refute element_exists?(doc, "#dropdown-test-component-option-1")
end
test "pre-fills the suggestions asynchronously", %{conn: conn} do
{: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)
doc = render(lv)
assert text_of_element(doc, "#dropdown-test-component-option-0") == "One"
assert text_of_element(doc, "#dropdown-test-component-option-1") == "Two"
assert text_of_element(doc, "#dropdown-test-component-option-2") == "Three"
assert text_of_element(doc, "#dropdown-test-component-option-1") == "One"
assert text_of_element(doc, "#dropdown-test-component-option-2") == "Two"
assert text_of_element(doc, "#dropdown-test-component-option-3") == "Three"
end
test "uses the suggestions function asynchronously", %{conn: conn} do
{:ok, lv, _html} = live_isolated(conn, SampleViewAsync, session: %{})
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)
doc = render(lv)
assert element_exists?(doc, "#dropdown-test-component-option-0")
assert text_of_element(doc, "#dropdown-test-component-option-0") == "Echo me"
assert element_exists?(doc, "#dropdown-test-component-option-1")
assert text_of_element(doc, "#dropdown-test-component-option-1") == "Echo me"
end
end
@ -358,7 +358,7 @@ defmodule PlausibleWeb.Live.Components.ComboBoxTest do
end
defp suggestion_li(idx) do
~s/#{@ul} li#dropdown-test-component-option-#{idx - 1}/
~s/#{@ul} li#dropdown-test-component-option-#{idx}/
end
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")
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")
assert text_of_element(doc, "#dropdown-step-1-option-0") == "Plausible"
assert text_of_element(doc, "#dropdown-step-1-option-1") == "Plausible"
end
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"]/)
lv
|> element("li#dropdown-step-1-option-0 a")
|> element("li#dropdown-step-1-option-1 a")
|> render_click()
assert lv
@ -50,7 +50,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.FormTest do
type_into_combo(lv, 1, "another")
lv
|> element("li#dropdown-step-1-option-0 a")
|> element("li#dropdown-step-1-option-1 a")
|> render_click()
doc = type_into_combo(lv, 2, "another")
@ -65,11 +65,11 @@ defmodule PlausibleWeb.Live.FunnelSettings.FormTest do
doc =
lv
|> element("li#dropdown-step-1-option-0 a")
|> element("li#dropdown-step-1-option-1 a")
|> render_click()
assert element_exists?(doc, ~s/#li#dropdown-step-1-option-14/)
refute element_exists?(doc, ~s/#li#dropdown-step-1-option-15/)
assert element_exists?(doc, ~s/#li#dropdown-step-1-option-15/)
refute element_exists?(doc, ~s/#li#dropdown-step-1-option-16/)
end
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")
lv
|> element("li#dropdown-step-2-option-0 a")
|> element("li#dropdown-step-2-option-1 a")
|> render_click()
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()

View File

@ -165,12 +165,12 @@ defmodule PlausibleWeb.Live.FunnelSettingsTest do
assert lv = find_live_child(lv, "funnels-form")
lv
|> element("li#dropdown-step-1-option-0 a")
|> element("li#dropdown-step-1-option-1 a")
|> render_click()
doc =
lv
|> element("li#dropdown-step-2-option-0 a")
|> element("li#dropdown-step-2-option-1 a")
|> render_click()
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")
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)
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()
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
{: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"
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"
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"
end
@ -55,7 +55,7 @@ defmodule PlausibleWeb.Live.PropsSettings.FormTest do
doc =
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()
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
{: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"
refute doc =~ "No properties configured for this site yet"
@ -169,9 +169,9 @@ defmodule PlausibleWeb.Live.PropsSettings.FormTest do
} do
{:ok, lv, _doc} = get_liveview(conn, site)
_doc = select_and_submit(lv, 0)
_doc = select_and_submit(lv, 0)
doc = select_and_submit(lv, 0)
_doc = select_and_submit(lv, 1)
_doc = select_and_submit(lv, 1)
doc = select_and_submit(lv, 1)
refute element_exists?(doc, ~s/button[phx-click="allow-existing-props"]/)
end