React Dropdown component using onBlur, onFocus, onMouseDown

Dropdown.jsx

import React from 'react';

class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isDropdownOpen: false };
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.handleDropdownClick = this.handleDropdownClick.bind(this);
    this.handleTogglerClick = this.handleTogglerClick.bind(this);
  }

  handleOpen() {
    this.setState({ isDropdownOpen: true });
  }

  handleClose() {
    this.setState({ isDropdownOpen: false });
  }

  handleDropdownClick(e) {
    const { isDropdownOpen } = this.state;

    if (!isDropdownOpen) {
      this.handleOpen();
      return;
    }

    e.preventDefault();
    e.stopPropagation();
  }

  handleTogglerClick() {
    const { isDropdownOpen } = this.state;
    this.setState({ isDropdownOpen: !isDropdownOpen });
  }

  render() {
    const { isDropdownOpen } = this.state;
    const { togglerText, children } = this.props;

    return (
      <div
        onFocus={this.handleOpen}
        onBlur={this.handleClose}
        onMouseDown={this.handleDropdownClick}
        tabIndex="0"
        role="button"
      >
        <button type="button" className="btn btn__dropdown" onMouseDown={this.handleTogglerClick}>
          {togglerText}
        </button>
        {isDropdownOpen && (
          <div className="dropdown__content">
            {children}
          </div>
        )}
      </div>
    );
  }
}

export default Dropdown;