Manage multiple React elements as if they were in one focus group.

FocusGroup.jsx

import React, { Component, createContext } from 'react'

const SetRefContext = createContext()

function isOutsideElement({ source, target }) {
  return source !== target && !source.contains(target)
}

class FocusGroup extends Component {
  static defaultProps = {
    onBlur: () => null,
  }

  static contextType = SetRefContext

  nodes = {}

  setRef = id => node => {
    if (this.context) {
      this.context(id)(node)
    }
    if (node) {
      this.nodes[id] = node
    } else {
      delete this.nodes[id]
    }
  }

  requestBlur = event => {
    const nextFocusedElement = event.relatedTarget || document.activeElement
    if (
      Object.keys(this.nodes).every(key =>
        isOutsideElement({
          source: this.nodes[key],
          target: nextFocusedElement,
        })
      )
    ) {
      this.props.onBlur(event)
    }
  }

  render() {
    return (
      <SetRefContext.Provider value={this.setRef}>
        {this.props.children({
          setRef: this.setRef,
          requestBlur: this.requestBlur,
        })}
      </SetRefContext.Provider>
    )
  }
}

export default FocusGroup