onBlur prevents onClick to execute

Let's assume that you have the following component:

jsx
import React, { useState } from 'react'

const Field = () => {

    const [name, setName] = useState('erik')

    const handleClick = () => alert('Click')
    const handleBlur  = () => alert('Blur')
    const handleName  = e  => setName(e.target.value)

    return (
        <>
            <button onClick  = {handleClick}>Click me</button>
            <input  
                onBlur   = {handleBlur}
                onChange = {handleName} 
                value    = {name}
            />
        </>
    )

}

export default Field

If you try to click the button while you are writing, it won't display the 'Click' alert, as onBlur prevents onClick to execute.

A solution could be to use onMouseDown instead of onClick. That works because the onMouseDown event has a higher priority than the onBlur event.

Example:

jsx
<button onMouseDown = {handleClick}>Click me</button>

Another solution colud be to delay the blur event a few ms.

Example:

jsx
<input onBlur = {() => setTimeout(handleBlur, 100)}>