147

I've got a form, in which I want to handle change event on text inputs, but React onChange triggering on key down (opposite to native JS, that triggers change event when an input field is out of focus).

Is there a React way to do what I want?

Alex Suslyakov
  • 2,042
  • 2
  • 14
  • 15

6 Answers6

310

If you want to only trigger validation when the input looses focus you can use onBlur.

React uses onFocus and onBlur instead of onFocusIn and onFocusOut. All React events are normalized to bubble, so onFocusIn and onFocusOut are not needed/supported by React. 2

Dominic
  • 62,658
  • 20
  • 139
  • 163
  • 2
    Thanks a lot. That's what I need. I just was unable to find something about "focusOut" in React – Alex Suslyakov Jun 03 '16 at 08:04
  • then we can't use value inside input filled with react – Thilina Sampath Oct 01 '17 at 16:01
  • Not sure what you mean @ThilinaSampath – Dominic Oct 01 '17 at 17:02
  • we can't use value inside input filled with react onBlur function. – Thilina Sampath Oct 02 '17 at 03:23
  • 1
    It's unclear what you're saying, you wouldn't assign a value to state using the onBlur event in the case of a controlled input, you would use onChange for that, otherwise nothing would change as you type. This is for triggering validation not assigning a value to the input :/ – Dominic Oct 02 '17 at 08:11
  • I want store in existing value react input filed then, I can't use onBlur. – Thilina Sampath Oct 03 '17 at 04:01
  • 1
    Yeah you would use onChange to update the value in the store, this question is about validation. Nothing stopping you from using both events. – Dominic Oct 03 '17 at 08:31
  • @Dominic I have a different problem. I'm storing form states in redux, when keyboard is open the submit button is on top of keyboard. The redux dispatch event is bound to onBlur event, but people clicking submit button before tapping anywhere on the screen. Due to which onBlur is not triggering ? any way to fix this ? I want to store values in redux state and post that only submit should work. – Vasanth Aug 16 '22 at 16:50
40
JavaScript React
onfocusout onBlur
onfocusin onFocus
Adam Azad
  • 11,171
  • 5
  • 29
  • 70
Majid Gabrlo
  • 659
  • 6
  • 5
10

Its late, yet it's worth your time nothing that, there are some differences in browser level implementation of focusin and focusout events and react synthetic onFocus and onBlur. focusin and focusout actually bubble, while onFocus and onBlur dont. So there is no exact same implementation for focusin and focusout as of now for react. Anyway most cases will be covered in onFocus and onBlur.

ali emili
  • 538
  • 2
  • 6
  • 19
jossie
  • 229
  • 6
  • 11
5

You'd need to be careful as onBlur has some caveats in IE11 (How to use relatedTarget (or equivalent) in IE?, https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget).

There is, however, no way to use onFocusOut in React as far as I can tell. See the issue on their github https://github.com/facebook/react/issues/6410 if you need more information. (see below for an update on this)

UPDATE:

As of React 17, the events have been updated - see PR for use focusin/focusout for onFocus/onBlur. However as the page listing breaking changes mentions:

Although React 17 switched from focus to focusin under the hood for the onFocus event, note that this has not affected the bubbling behavior. In React, onFocus event has always bubbled, and it continues to do so in React 17 because generally it is a more useful default. See this sandbox for the different checks you can add for different particular use cases.

kahlan88
  • 101
  • 1
  • 8
0

In my case i wanted to the input get submitted when i finish writing the new value,so in the onBlur i did the fetch call:

<Form.Control
    placeholder={i.stock}
    type="text"
    id={"inputID"}
    onBlur={
        (event) => {
            if (confirm("Do you want to update stock of " + i.label + " to " + event.target.value) == true) {
                fetch(REACT_APP_REST + "/product/" + i._id, {
                    method: 'PATCH',
                    headers: {
                        'Accept': 'application/json, text/plain, */*',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ stock: event.target.value })
                }).then(res => res.json())
                    .then(res => {
                        toast("the stock of" + i.label + "has been updated");
                        getData();
                        console.log(res)
                    });
            } else {
                alert("You canceled!")
            }
        }
    }
></Form.Control>
L3xpert
  • 1,109
  • 1
  • 10
  • 19
-1

Try this event in React , it worked for me. onMouseLeave(). Use this if onBlur() and onFocusOut does not work for you.

Rohit Verma
  • 1
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 26 '22 at 16:20