Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

onBlur is called from child elements

Tags:

reactjs

onblur

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

like image 219
Elias Ghali Avatar asked Jul 11 '17 08:07

Elias Ghali


People also ask

What element is Onblur?

Supported elements HTML onblur attribute supports a, area, button, input, label, select, textarea elements. onblur can be effectively applied on form elements.

What is Onblur?

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.

What is Onblur in react?

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.

What is Onblur and Onfocus in JavaScript?

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.


1 Answers

React documents this problem by utilizing the event loop with a setTimeout function with an empty second argument.

like image 78
brennvo Avatar answered Sep 22 '22 03:09

brennvo