Menu
I'm creating a form with a select dropdown. One of the options is "other - please specify", which is supposed to display an extra text field for more details.
I managed to do it using onChange event + some simple value check (as I can't rely on the position).
I started testing it and realized that while it works perfectly when using a mouse (onChange is ran after the control loses focus), it doesn't when I use the keyboard (since it didn't lose focus yet) - only after I press tab do the changes appear (which looks weird).
It seems to me like I'm missing something obvious, I looked for other events and the closest I've found is onclick, but that's not it either.
So the question is, is there a better way of solving this?
885
All you need to do is use onInput instead of onChange . input.
input s provided to Fields as their component props are created anew after every keystroke. This causes them to lose focus, despite having an unique, constant key.
The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed.
onchange event is considered one of the very important property of the GlobalEventHandlers which is part of the EventHandler for making manipulations with the changes in the event.
You can simply add this to the <select> tag:
onkeyup="this.onchange();"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
