Detect a click outside of a component using onBlur

Let's assume that you want to create a modal that disappears on an outside click.

javascript
import React, { useEffect, useState } from 'react'

const Modal = () => {
  
    const [show, setShow] = useState(true)
    
    useEffect(() => {
        
        document.getElementById('Modal')?.focus()
        
    }, [show])
    
    const handleBlur = (e) => {
        
        if (!event.currentTarget.contains(event.relatedTarget)){

            setShow(false)

        }

    }
    
    return show
    ? <div id = 'Modal' onBlur = {handleBlur} tabindex = '1'>
        <p>This is a modal</p>
        <button>Dummy</button>
      </div>
    : null
  
}

As the modal is a div, you need to add tabindex = '1' to allow focusing. tabindex = '1' and document.getElementById('Modal') are for divs the equivalent of autoFocus for input elements.

Every time you show the modal, you refocus it.

When there is a blur event, check if the new target isn't part of the modal component. If it doesn't, you hide it.

Hi, I'm Erik, an engineer from Barcelona.

If you like the post, say hi or join Substack to get non-frequent updates.