Click event lost after rerendering react (caused by blur event) - javascript

Demo : https://codesandbox.io/s/jolly-glitter-zuvr8?file=/src/App.js
I have a section with a text input and a button
I want to refresh the section on blur event of text input (I force refresh with key attribute in my example)
and display a text on click event on the button
The issue : When the focus is on the input text and I click on the button, I have the blur event and the click event at same time.
The click event is ignored.
I thinks the is because the order of JS events are blur, then click.
To reproduce :
No focus on input text, then click on the button => OK
Focus on input text, then click beside on the page, then click on the button => OK
Focus on input text, then click then click on the button => Not OK (the text "clicked" is not displayed) (but with a second click => OK)

Related

Only 1 render triggered after 2 setState in onBlur & onFocus in a row

Open the CodePen, toggle the console.
When using keydown callback to trigger the focus change:
click black area to focus the outside div.
press any ARROW KEYS to focus inside div
render is called ONCE
When using click to trigger the focus change:
click black area to focus the outside div.
press tab or click yellow area to focus inside div
render is called TWICE
In both scenarios, blur & focus events are triggered in a row, why is the render time different?

I filed a bug to react and got an response.
See it here: https://github.com/facebook/react/issues/19698

IE11/Win7 input (with specific content) event is triggered on page reload , input field is a react component which triggers onInputChange event

On IE11 , i have this issue where , with specific content in the input field , input event is triggered on page reload, which makes the dropdown menu to appear without any action from the user.
The specific content being characters such as ü,ö or ä.Basically the input feild is react based component.
This happens only on IE11.Please have look at the screenshot.
Before reload ,
After reload the dropdown menu appears, which should happen only when onInputChange is triggered:
required behaviour would be : No input event triggered on page reload.

The 'blur' event is triggerd but the 'save' event is not when the element is out of focus

For a field in form that's mandatory, there is a blur event which is triggered every time the element is out of focus.
Within the same form, there is a save event which should be triggered when the 'save' button is clicked. But the blur event is triggered first and then the 'save' button needs to be clicked again tos the form.
Is there a way I can stop triggering the blur event to fire when the 'save' button is clicked?

How to disable click handler on body on focus out(mobile)?

I want to disable click handler on other elements on focus out of text fields. It works fine on desktop browsers but I am not able to restrict click on rest of body on mobile.
$(".text-box").on("focusout", function(event) {
});
$(".any-other-element").click(function(){
})
I want that click event attached on any-other-element should not fire on focus out of textbox.

Conflicts of blur and submit/click events

I have two items
item1 is textbox
item2 is submit button
Now item1 has blur event in jquery. In that blur event I have validation and based on that validation if it fails user will have confirmation message.
So if user press yes he can proceed futher
if user press no that textbox will be blank and need to enter detail again.
So now my issue is that if user enter detail in item1 and directly click on item2, button's submit event rejected and item1's blur event called. So first time is rejected and user have to press 2nd time on button(This is the issue).
So how to know in item1's blur event if user click on item2 than I can proceed further with triggering item2's click event.

Consider this code
var $item1 = $('#item1');
var $item2 = $('#item2');
$item1.on('blur', function (oEvent) {
if ($item2.is(oEvent.relatedTarget)) {
// your blur is caused by click on $item2 a.k.a submit button
} else {
// your blur is caused by smth else
}
});
It checks where your focus was moved and you can add some specific boolean flag to use later on in your submit handler or maybe change your validation somehow.
Please note that blur event is event of loosing focus, focus can go away not only because of clicks, but also because of tab-navigation for example.
UPDATE:
added a jsfiddle http://jsfiddle.net/DbjQc/
Try focusing the text input and then clicking somewhere else. After that try focusing the text input again and then click the submit button - you will see how behavior changes.

Categories