React and blur event

Question

I have a simple issue with React and event handling. My component looks like this (basically a table):

const MyList = ({ items, onBlur }) =>
<table onBlur={onBlur}}>
    <thead>
    <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Publisher</th>
        <th>Year</th>
        <th>Author</th>
        <th>System</th>
        <th/>
    </tr>
    </thead>
    <tbody>
    {items.map(item => <MyListRow key={item.Id} item={item}/>)}
    </tbody>
</table>;

I want the blur event to fire only if the focus goes out of the table. Instead the event fires on each child element of the table when it loses focus.

According to the docs React lets focus events bubble up.

The question is: How can I get my onBlur method fire only when the focus gets out of the table? IOW: How can I filter out and discard the unwanted events bubbling up so that I reveal only the events which indicate a lost of focus for the table?

Answer 1

The problem is that a table doesn't actually have a concept of focus since it's not an input itself.

When the onBlur fires on the contained inputs we will check the relatedTarget of the onBlur event which should be set to the element that has RECEIVED focus (or null). We then use a function that will traverse upwards through parentNodes from that newly focused element and ensure that our event's currentTarget (the table) is not an ancestor of the newly focused element. If the condition passes it is assumed that the table no longer has any focus.

const focusInCurrentTarget = ({ relatedTarget, currentTarget }) => {
  if (relatedTarget === null) return false;
  
  var node = relatedTarget.parentNode;
        
  while (node !== null) {
    if (node === currentTarget) return true;
    node = node.parentNode;
  }

  return false;
}

const onBlur = (e) => {
  if (!focusInCurrentTarget(e)) {
    console.log('table blurred');
  }
}

const MyList = ({ items, onBlur }) => (
  <table onBlur={onBlur}>
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Publisher</th>
        <th>Year</th>
        <th>Author</th>
        <th>System</th>
        <th/>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>
          <input type="text" />
        </td>
        <td>
          <input type="text" />
        </td>
        <td>
          <input type="text" />
        </td>
        <td>
          <input type="text" />
        </td>
        <td>
          <input type="text" />
        </td>
      </tr>
    </tbody>
  </table>
);
    
ReactDOM.render(
  <MyList onBlur={onBlur} />,
  document.getElementById('root')
);

table {
  padding: 10px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
<br />
<input type="text" />

References:

• http://www.w3schools.com/jsref/event_onblur.asp
• http://www.w3schools.com/jsref/event_currenttarget.asp
• http://www.w3schools.com/jsref/event_focus_relatedtarget.asp
• https://stackoverflow.com/a/2234986/2957138 (basis for our ancestor-checking function)

UPDATED:

Removed use of ReactDOM.findDOMNode

Answer 2

Just to hopefully synthesise David Riccitelli's helpful pointer, and wintondeshong's later insight, this worked for me:

class ActionRow extends Component {

  onBlur = (e) => {
    if ( !e.currentTarget.contains( e.relatedTarget ) ) {
      console.log('blur event');
    }
  }

  render() {
    return (
      <div onBlur={this.onBlur}>
        ..
      </div>
    )
  }
}

I was trying to trigger a save action based on when focus left a div full of form fields.

Answer 3

Without custom functions and Internet Explorer compatible, since node.contains and document.activeElement are supported since Internet Explorer 5, this works:

const onBlur = (e) => { if ( !e.currentTarget.contains( document.activeElement ) ) { console.log('table blurred'); } }

• The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node or not.
• Document.activeElement returns the currently focused element, that is, the element that will get keystroke events if the user types any.

Answer 4

A quick way to do this is to:

1. Wire up an onBlur and onFocus event to your parent element
2. Start a timer with setTimeout when blur happens
3. Clear the timeout when the focus happens.

It would look something like this:

class MyList extends Component {
  onBlur() {
    this.blurTimeoutHandle = setTimeout(this.props.onBlur)
  }
  onFocus() {
    clearTimeout(this.blurTimeoutHandle)
  }

  render() {
    return (
      <table onBlur={this.onBlur} onFocus={this.onFocus}>
      ...
      </table>
    )
  }
)

This works because all the child blurs will bubble up to the parent and then the focus events will cancel them unless focus has moved outside the parent.

Kudos to J. Renée Beach and her great Medium article for the basics of this solution.

Answer 5

So for my use case, I need to monitor when a user leaves the application and based on that give a warning and change the contents of the application so the user can't cheat. That being said this is how I was able to solve it based on @TheZanke Approach

Wrap the component you need to have this functionality around and pass the props in and should work perfectly. maintaining this is way easier for my case so I use this

import PropTypes from "prop-types"
import React, { useState, useEffect } from 'react'



export default function OutsideAlerter({ children, fallback, initialIsVisible, isVisible, onSetIsVisible }) {
    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
    const handleClickOutside = event => {
        if (!event?.currentTarget?.contains(event?.relatedTarget)) {
            onSetIsVisible(false)
        }
    };

    const handleClickInside = event => {};

    useEffect(() => {
        setIsComponentVisible(isVisible === undefined ? initialIsVisible : isVisible);
    }, [isVisible])

    return (
        <div
            style={{
                width: '100%',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
            }}
            tabIndex="0"
            onBlur={handleClickOutside}
            onClick={handleClickInside}
        >
            {isComponentVisible ? children : fallback}
        </div>
    )
}

OutsideAlerter.propTypes = {
  children: PropTypes.element,
  fallback: PropTypes.element,
  initialIsVisible: PropTypes.bool.isRequired,
  isVisible: PropTypes.bool,
  onSetIsVisible: PropTypes.func
}

This is the fallback component passed

<OutsideAlerter
            fallback={
                  <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    color: '#fff',
                    alignItems: 'center',
                    height: '100vh',
                  }}>
                    <div>You have clicked outside of the application</div>
                    <button
                      name='exam'
                      onClick={(e) => handleVisible(e, true)}
                    >IsVisible</button>
                  </div>
            }
            initialIsVisible={true}
            isVisible={isVisible?.exam}
            onSetIsVisible={(e) => handleVisible({ target: { name: 'exam' } }, e)}
          >
              <BaseRoutes />
          </OutsideAlerter>

 const handleVisible = (e, bool) => {
    setIsVisible({ ...isVisible, [e.target.name]: bool })
  }