popper makes it work better.

This commit is contained in:
2023-10-25 13:30:40 -07:00
parent deaad7513c
commit 3f36936063
2 changed files with 16 additions and 8 deletions

View File

@@ -80,18 +80,22 @@ c.clearChoices();
:active -1
:elements (if ((:value-fn params identity) (:value params))
[{:value ((:value-fn params identity) (:value params)) :label ((:content-fn params identity) (:value params))}]
[])})
[])
:popper nil})
:x-modelable "value.value"
:x-model (:x-model params)
:class "relative"}
:x-init "popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed'})"
}
[:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes)
(hh/add-class "cursor-pointer"))
"@click.prevent" "open = !open;"
"@keydown.enter.prevent.stop" "open = !open;"
"@keydown.down.prevent.stop" "open = true;"
"@keydown.backspace" "value = {value: '', label: '' }"
"@click.prevent" "open = !open; popper.update()"
"@keydown.enter.prevent.stop" "open = !open; popper.update()"
"@keydown.down.prevent.stop" "open = true; popper.update()"
"@keydown.backspace" "value = {value: '', label: '' }"
:tabindex 0
:x-init (:x-init params)}
:x-init (:x-init params)
:x-ref "input"
}
[:input (-> params
(dissoc :class)
(dissoc :value-fn)
@@ -109,7 +113,8 @@ c.clearChoices();
[:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
svg/drop-down]]]
[:ul.dropdown-contents {:class "absolute bg-gray-50 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-50 mt-1"
[:ul.dropdown-contents {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-50"
"x-ref" "dropdown"
"@keydown.escape" "open = false; value = {value: '', label: '' }"
"x-transition:enter" "ease-[cubic-bezier(.3,2.3,.6,1)] duration-200"
"x-transition:enter-start" "!opacity-0 !mt-0"