CODEWITHSUNDEEP
javascriptreactjs
Alex Suslyakov
Alex Suslyakov

Reputation: 2222

How to correctly catch change/focusOut event on text input in React.js?

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?

Upvotes: 163

Views: 327445

Answers (6)

nanobar
nanobar

Reputation: 66355

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

onBlur: A FocusEvent handler function. Fires when an element lost focus. Unlike the built-in browser blur event, in React the onBlur event bubbles.

Upvotes: 338

Majid Gabrlo
Majid Gabrlo

Reputation: 899

JavaScript React
onfocusout onBlur
onfocusin onFocus

Upvotes: 53

Rohit Verma
Rohit Verma

Reputation: 1

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

Upvotes: -1

Vinci
Vinci

Reputation: 1286

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>

Upvotes: 0

kahlan88
kahlan88

Reputation: 101

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.

Upvotes: 5

jossie
jossie

Reputation: 229

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.

Upvotes: 10

Related Questions