i have a container div that contains many inputs and checkboxes inside, i want to trigger an onBlur event only when the container div loses focus, instead the onBlur event is triggered everytime any element inside it loses focus
Supported elements HTML onblur attribute supports a, area, button, input, label, select, textarea elements. onblur can be effectively applied on form elements.
The onblur attribute fires the moment that the element loses focus. Onblur is most often used with form validation code (e.g. when the user leaves a form field). Tip: The onblur attribute is the opposite of the onfocus attribute.
onBlur. The onBlur event handler is called when focus has left the element (or left some element inside of it). For example, it's called when the user clicks outside of a focused text input. function Example() { return ( <input onBlur={(e) => { console.
Definition and Usage Tip: The onblur event is the opposite of the onfocus event. Tip: The onblur event is similar to the onfocusout event. The main difference is that the onblur event does not bubble. Therefore, if you want to find out whether an element or its child loses focus, you could use the onfocusout event.
React documents this problem by utilizing the event loop with a setTimeout
function with an empty second argument.
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