"Change" event is not triggered

[Manukam]

Hi,

Just linking the previous issue I opened so that the code samples and the context are available.

#17

Issue is, the handle_info function is triggered when the user inputs characters, but once an option is clicked, the phx_change event is not triggered. Any idea why? Is this because I am using live_select inside a component?

Also as mentioned in the other issues, live_select's handle_info is received by the parent, so, I included the handle_event also in the parent

[maxmarcon]

Also as mentioned in the other issues, live_select's handle_info is received by the parent, so, I included the handle_event also in the parent

That's wrong. handle_event should be placed in the Live view or component that receives your phx-change form event. So if your form is implemented in a live component, the handle_event callback should be defined in that live component (you also need to set phx-target={@myself} in the form).
The phx-change event has nothing to do with live select specifically, it's the standard phx-change event triggered by all LV forms.

[maxmarcon]

where you able to solve the issue @Manukam ?

[Manukam]

No, I put the handle_event("validate" ,...) (my form's phx_change event is named as validate) method in both the parent liveview, and in the component as well, still it's not getting triggered. If the event was getting triggered and was going to the wrong place, I should get an error function undefined error, but don't get that as well.

Interesting thing is, I have other form fields in this form, and for them the event is getting fired, only for live_select it's not getting fired.

[maxmarcon]

Did you add the JS hooks? Are you seeing errors in your browser's console?

[Manukam]

Hooks are working fine, I see whenever I click an option, an update msg from utils.js is printed. My component is not a live component, could that be the reason?

[maxmarcon]

I'm confused. I thought your form was in a live component? You said you put handle_event in your component. How can you do this if it's not a live component? Stateless component can't receive events.

I think it will be easier if you share your code

[Manukam]

Pretty new to Phoenix and trying to figure this out. Yes you are correct, my form element is in a live component, i.e
use TestWeb, :live_component

I use another custom component inside the live component, this is where the live_select is defined, this sub component is defined as
use Phoenix.Component

[maxmarcon]

ok that makes sense. It should work. But it's hard for me to help without seeing any code

Interesting thing is, I have other form fields in this form, and for them the event is getting fired, only for live_select it's not getting fired.

This part is weird. if you're seeing your "validate" event triggered for all fields but not for live_select, the only reason I can think of is that the hooks are not working. But if the hooks aren't working, then you shouldn't be able to select anything. Are you sure you can select something from the dropdown and then it appears in the live select input as selected element, just as it does here?

Absolutely positive that you added the live select hook as explained here?

Again, sharing some code would be the best way to make progress here.

[Manukam]

I can select something from the dropdown, but what I selected does not show up as a selected element. The dropdown simply disappears when I click on an option. When I select an option it should trigger the "change" event right?

[maxmarcon]

That's a sign that your hooks don't work. I reiterate: have you set up the hooks correctly? Can you show me what you're doing?

[Manukam]

Oh! You were right, it was a problem with the hooks. Thank you for this! Sorry for taking this long to figure out this silly mistake!