CODEWITHSUNDEEP
reactjstypescriptevent-handlingonbluronfocus
awj
awj

Reputation: 7959

Using onBlur to set focus in a React component

I've attached an onBlur event handler in a React component in which the logic sets the focus back to the target element (and writing this in TypeScript).

emailBlur(e: React.FocusEvent<HTMLInputElement>) {
    e.currentTarget.focus();
    e.preventDefault();
    // re-ordering these statements makes no difference
}

This is bound

<input type="email" onBlur={this.emailBlur} />

Furthermore, the constructor contains

this.emailBlur = this.emailBlur.bind(this);

But the focus never gets set - if I click from the target element to another element, the focus never goes back to the target element.

Why isn't the focus being set back to the target element?

Upvotes: 2

Views: 12930

Answers (2)

Heini
Heini

Reputation: 161

Have you tried using e.currentTarget and a timeout like this?

e.preventDefault();
const target = e.currentTarget;
setTimeout(
    function () {
        target.focus();
    },
    5
);

Upvotes: 2

basarat
basarat

Reputation: 276085

Why isn't the focus being set back to the target element?

Use setTimeout so the blur completes before you focus again 🌹

Upvotes: 1

Related Questions