Having both phx_blur and phx_change applicable?

Phoenix Forum Chat / Discussions
, , ,
1

Hello everybody,

It seems that it’s not possible to have a phx-blur on an input while there’s already a phx-change on the form itself…

Why there’s such a limitation?

I have a use case where I want to display error messages on a form but applicable as soon as a required field is left.
I mean at the beginning there’s no errors displayed.
But when we focus (enter) and then blur (exit) on an input without editing it, it will not trigger the phx-change event.

So that’s why I wanted to have a phx-blur on inputs.

What are your thoughts?

2

I just noticed that the phx-feedback-for doesn’t work for phx-blur events but only for phx-change events.
I tried to use only the phx-blur events and keep track of which input is changed manually, but then the phx-feedback-for handling is not kicking and then I got all my errors with the phx-no-feedback CSS class.

I think that’s there is definitely room for improvements, right?

What are you thinking?

I would like to dig into the Phoenix library to check if it’s possible to handle that for a phx-blur event.
It seems more accessible for me to check that rather than trying to have both of the events trigggering at the same time…

3

Hello Sanjibukai.

I’m having the same issue. My example code just to reproduce the issue can be found at https://github.com/justincjohnson/sandbox/blob/master/lib/sandbox_web/live/page_live.ex. In my case I want validations for a field to kick in 1 second after focusing on that field. First name and last name in the example repository do this, but as with you, the phx-no-feedback class remains on the errors so they don’t show up.

Please let me know if you find a solution. :slight_smile: I shall do likewise.

Justin

4

At https://github.com/phoenixframework/phoenix_live_view/blob/e8da644ea7f7e8452dabda838d1edd0c4c150d5a/assets/js/phoenix_live_view.js#L1197 I would have thought phx_has_focused would be true in my example, but I’m not taking the time to really understand this code.

5

I created https://github.com/phoenixframework/phoenix_live_view/issues/1166 for my issue, just in case it is related to yours. My current hunch is that the code doesn’t properly handle focus and blur events.

1 Like
6

Hello,

Well I changed my tune by displaying the errors by default…
In fact now those texts behave like hints rather than errors…
When the field is set accordingly, the “hint” (what is really a changeset error) disappears.

This might not be a solution for many other traditional use cases, but since in the particular project I’m working on, this was accepted, I simply don’t dive further in the question…

I’ll be interested to follow the issue though…