Search code examples
reactjstypescriptevent-handlingonbluronfocus

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?

Solution

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

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