Why is this onClick handler not called? (Playground code)
https://playground.solidjs.com/anonymous/b2bfddd1-102a-4f7a-a6e3-5d22846695e4
In the following playground code, when putting the focus on the text field, then clicking on the text (exactly in that order), the onClick on the text is not called (no "HELLO!" print).
I have no idea why the onClick callback is ignored.
(but I know it's because of the error message that appears, but don't understand why the addition of the error message stops the onClick handler to be executed)
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
30 Replies
I can't reproduce on the playground
Is this still an issue?
yes
Click on the text field first (nothing else), then on the text with background
there is no HELLO! log
can you reproduce it now @tommypop ?
yes
Sorry I misunderstood your original post
the error isn't related, the playground doesn't load one of the dependencies correctly so it happens
@otonashi9 I have this problem in my project
I eliminated a lot of code to showcase
afaict this is just because the blur happens first then the click
so if the div moves out of the way then the click won't happen
if you click near the bottom of the div it logs
@otonashi9 in the real project, the element below is a custon dropdown component. The dropdown is not showing the dropdown menu when clicked for this specific case.
what do you think about that?
doesn't seem related to this reproduction to me
it's the same thing. Say the focus is on the text field, then clicks the dropdown, but the error message appears, and the onClick handler of the dropdown is not executed.
the problem is just that the error message appears before the click happens
that's it
you can see this if you hold down the mouse button
showcasing how this is a problem in my project
@otonashi9 How can I solve this problem you think?
i'm not really the best person to ask this but imo the layout shouldn't shift due to the error message
if it has to shift then i'm not sure, maybe use
onMouseDown instead of onClickty I'll be back with additional research
I presume these are the errors you're talking about
no
Oh?
there are no errors
the problem is about the behavior of onBlur/onClick/layout shifting, etc
Oh, ok, my bad
I misunderstood (again)
Hey np! Thanks for looking<3
@otonashi9 I was pretty optimistic when adding a
setTimeout to the onBlur callback handler of the text field. It works but only if I add like 100.
To my surprise it doesn't work with 0 or even 10 (on my machine).
https://playground.solidjs.com/anonymous/5eb7b744-4efc-445e-af40-0cd2969564a3
Would you understand why a setTimeout to 10 isn't even sufficient for the onClick and other stuff to happen first? (try at least twice)because usually the time between mousedown and mouseup is longer than 10ms
this should work regardless of the amount of time the mouse is held down imo
so a timeout isn't the best solution
@otonashi9 I just want to give you an update, about my research and how I decided to solve that problem.
- It is not generally recommended to replace onClick handlers by onMouseDown, because that leads to a behavior that is different from the html elements. Take a button, if you click on it, but realize it is a mistake, but you still have the mouse down, you can move away with your cursor and release the mouse. It won't trigger the action. By replacing onclick by onmousedown, we are breaking this expected behavior.
- HOWEVER, I noticed that is not the case for select dropdown triggers. If you click on a classic html select input, the menu shows in any case (probably because this can't lead to any mutation in any case just yet).
So in the end I replaced the onClick by onMouseDown as you suggested. This led to a whole other series of problems, which I had to fix one by one.
Thank you very much to explain the problem (onClick doesnt trigger if mouse has moved away before releasing) and putting me on the right track with onMouseDown.
Ty as always<3
- HOWEVER, I noticed that is not the case for select dropdown triggers. If you click on a classic html select input, the menu shows in any case (probably because this can't lead to any mutation in any case just yet).this is probably because for the native select element you can hold down the cursor then move to the option you want before releasing the cursor
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
I can't produce this on Windows
Which OS are you using, and did you try it?
windows
firefox
WOW
indeed on FF this works, but not on my Chrome
interesting
@otonashi9 by the way, the select elements and their behavior is way nicer on iOS/Mac. I had a Mac for few months and noticed a better experience on Mac.