in index.html.heex
<.live_component
module={PromptLive.FormComponent}
id={@prompt.id || :new}
title={@page_title}
action={@live_action}
prompt={@prompt}
patch={~p"/prompts"}
/>
subbu
0
trisolaran
when you change the text in the “textarea” field, is the change event being sent to FormComponent as expected?
Is the LiveSelect hook loaded? Do you say errors in the JS console?
0
subbu
Yes. validate event gets triggered on FormElement when I change the textarea. Here are the hooks:
in hooks.js
import live_select from "live_select"
let Hooks = {};
Hooks.Tippy = {...}
Hooks.LiveSelect = live_select;
export default Hooks;
0
trisolaran
that doesn’t tell me that the hooks are being passed to the LiveSocket constructor, but let’s assume they are.
In any case, the “change” event on the text input field should go to FormComponent and not to the parent live view even if the hooks are not there.
Are you on the latest version? Are you sure this is the only live select on the page and there isn’t one in the parent liveview triggering the event?
If the answer is yes to both question, the only thing I can suggest is to open an issue on github and share more code.
0
subbu
Yes, this is the only live_select. In any case I’ll try and find the bug, if not I’ll open an issue in github. Thanks for your patience 
1
egeersoz
Is there a way to prevent the dropdown panel from closing when a selection is made? For example, the user types a text, then wants to select multiple items in quick succession from the list.
0
trisolaran
Not at the moment, but it should be pretty easy to add an option for that behavior. If you open an issue, I’ll work on it as soon as I have some time. Or you can take as stab at it yourself if you want to. Thanks!
0
egeersoz
Thanks, I opened an issue on Github. In the short term, is there a way to inspect the HTML markup of the dropdown menu? It automatically closes when using the Inspect tool in Chrome!
0
egeersoz
Speaking of testing, what is the testing strategy for a component that uses LiveSelect?
Specifically, I’d like to write a test with the following steps:
- Click on the input and type “Ala”
- Assert that the dropdown field contains states with the text, e.g. “Alabama”
- Click “Alabama”
- Assert that “Alabama” got added to the
selected_statesassign - Click the X on the “Alabama” tag
- Assert that “Alabama” got removed from the assign
0
trisolaran
There’s tricks on how to inspect content that disappear automatically when focus is lost. The easiest I know of is this one.
Most of this test has little value because it’s not testing your code but a library that’s already tested. There’s already tests in the live select test suite that check that the dropdown is correctly filled with elements, that clicking on “x” removes tags, etc.
Your tests should test your own code 
You test it like any other input element: send the form’s data using render_submit or render_change and test that your view (or component) is reacting as you expect.
The only caveat is that the input value is sent with an hidden input, so you can’t use form to set the value, you have to do it in the render_submit call.
0