I’m working on a Notification feature in my app (pretty much like Facebook notifications).

When I click a button in the header navigation, the dropdown opens and shows the notification list. The notification has a Link (from react-router) in it.

What I need to do is to close the dropdown whenever a Link is clicked.

Here’s roughly the hierarchy I currently have:

Header > Navigation > Button > Dropdown > List > Notification > Link

Since the dropdown functionality is used more that once, I’ve abstracted its behavior away into a HOC that uses render prop:

export default function withDropDown(ClickableElement) {
  return class ClickableDropdown extends PureComponent {
    static propTypes = {
      children: PropTypes.func.isRequired,
      showOnInit: PropTypes.bool,
    };

    static defaultProps = {
      showOnInit: false,
    };

    state = {
      show: !!this.props.showOnInit,
    };

    domRef = createRef();

    componentDidMount() {
      document.addEventListener('mousedown', this.handleGlobalClick);
    }

    toggle = show => {
      this.setState({ show });
    };

    handleClick = () => this.toggle(true);

    handleGlobalClick = event => {
      if (this.domRef.current && !this.domRef.current.contains(event.target)) {
        this.toggle(false);
      }
    };

    render() {
      const { children, ...props } = this.props;
      return (
        <Fragment>
          <ClickableElement {...props} onClick={this.handleClick} />
          {this.state.show && children(this.domRef)}
        </Fragment>
      );
    }
  };
}

The HOC above encloses the Button component, so I have:

const ButtonWithDropdown = withDropdown(Button);

class NotificationsHeaderDropdown extends PureComponent {
  static propTypes = {
    data: PropTypes.arrayOf(notification),
    load: PropTypes.func,
  };

  static defaultProps = {
    data: [],
    load: () => {},
  };

  componentDidMount() {
    this.props.load();
  }

  renderDropdown = ref => (
    <Dropdown ref={ref}>
      {data.length > 0 && <List items={this.props.data} />}
      {data.length === 0 && <EmptyList />}
    </Dropdown>
  );

  render() {
    return (
      <ButtonWithDropdown count={this.props.data.length}>
        {this.renderDropdown}
      </ButtonWithDropdown>
    );
  }
}

List and Notification are both dumb functional components, so I’m not posting their code here. Dropdown is pretty much the same, with the difference it uses ref forwarding.

What I really need is to call that .toggle() method from ClickableDropdown created by the HOC to be called whenever I click on a Link on the list.

Is there any way of doing this without passing that .toggle() method down the Button > Dropdown > List > Notification > Link subtree?

I’m using redux, but I’m not sure this is the kind of thing I’d put on the store.

Or should I handle this imperatively using the DOM API, by changing the implementation of handleGlobalClick from ClickableDropdown?

Edit:

I’m trying with the imperative approach, so I’ve changed the handleGlobalClick method:

const DISMISS_KEY = 'dropdown';

function contains(current, element) {
  if (!current) {
    return false;
  }

  return current.contains(element);
}

function isDismisser(dismissKey, current, element) {
  if (!element || !contains(current, element)) {
    return false;
  }

  const shouldDismiss = element.dataset.dismiss === dismissKey;

  return shouldDismiss || isDismisser(dismissKey, current, element.parentNode);
}

// Then...
handleGlobalClick = event => {
  const containsEventTarget = contains(this.domRef.current, event.target);
  const shouldDismiss = isDismisser(
    DISMISS_KEY,
    this.domRef.current,
    event.target
  );

  if (!containsEventTarget || shouldDismiss) {
    this.toggle(false);
  }

  return true;
};

Then I changed the Link to include a data-dismiss property:

<Link
  to={url}
  data-dismiss="dropdown"
>
  ...
</Link>

Now the dropdown is closed, but I’m not redirected to the provided url anymore.

I tried to defer the execution of this.toggle(false) using requestAnimationFrame and setTimeout, but it didn’t work either.

Solution:

Based on the answer by @streletss bellow, I came up with the following solution:

In order to be as generic as possible, I created a shouldHideOnUpdate prop in the ClickableDropdown dropdown component, whose Hindley-Milner-ish signature is:

shouldHideOnUpdate :: Props curr, Props prev => (curr, prev) -> Boolean

Here’s the componentDidUpdate implementation:

componentDidUpdate(prevProps) {
  if (this.props.shouldHideOnUpdate(this.props, prevProps)) {
    this.toggle(false);
  }
}

This way, I didn’t need to use the withRouter HOC directly in my withDropdown HOC.

So, I lifted the responsibility of defining the condition for hiding the dropdown to the caller, which is my case is the Navigation component, where I did something like this:

const container = compose(withRouter, withDropdown);
const ButtonWithDropdown = container(Button);


function routeStateHasChanged(currentProps, prevProps) {
  return currentProps.location.state !== prevProps.location.state;
}

// ... then

  render() {
    <ButtonWithDropdown shouldHideOnUpdate={routeStateHasChanged}>
      {this.renderDropdown}
    </ButtonWithDropdown>
  }