在我可以（mouseclick）选择一个选项之前，react-select输入关闭

Question

编辑：此问题在Firefox（Ubuntu 16）中发生，但是使用Chrome浏览器没有问题。

使用React.js和react-select，我有以下情况：

当我单击选择输入时，将显示带有选项的下拉菜单，但几乎立即关闭。

期望的行为：保持打开状态，直到我选择一个选项为止。

有人知道为什么会这样吗？

这是我的代码（至少其中一些）。

包含选择输入的组件：

import React from "react";
import { sec } from "../style/Colors";
import Select from "react-select";

const TagSelectForm = ({ onTagSelectChange, options }) => {
  return (
    <div className="tagselect-main-container">
      <Select isMulti={true} onChange={onTagSelectChange} options={options} />
    </div>
  );
};

export default TagSelectForm;

父组件：

import React, { Component } from "react";
import ContentRequest from "../components/ContentRequest";
import axios from "axios";
import TagSelectForm from "../components/TagSelectForm";
import styled from "styled-components";

class OverviewPage extends Component {
  state = {
    contentRequests: [],
    contentRequestTags: [],
    filterTags: []
  };

  async componentDidMount() {
    const { data: JSON_string } = await axios.get(
      "http://localhost:8000/request"
    );
    const { requests, tags } = JSON.parse(JSON_string);
    this.setState({ contentRequests: requests, contentRequestTags: tags });
  }

  filterByTags = () => {
    const { contentRequests } = this.state;
    const filteredRequests = contentRequests.filter(request =>
      this.testContainsAFilterTag(request.tags)
    );
    return filteredRequests;
  };

  handleAddFilterTag = tag => {
    const filterTags = [...this.state.filterTags, tag];
    this.setState({ filterTags });
  };

  handleTagSelectChange = selectedTagsList => {
    this.setState({ filterTags: selectedTagsList });
  };

  handleRemoveFilterTag = tagID => {
    const filterTags = this.state.filterTags.filter(tag => tag.id !== tagID);
    console.log("filterTags", filterTags);
    this.setState({ filterTags });
  };

  setOverViewpageState = (stateName, stateValue) => {
    this.setState({ [stateName]: stateValue });
  };

  testContainsAFilterTag = tags => {
    const { filterTags } = this.state;
    const filterTagIDs = filterTags.map(tag => tag.value);
    return tags.some(tag => filterTagIDs.includes(tag.id));
  };

  renderRequests = () => {
    let { contentRequests } = this.state;
    const { filterTags } = this.state;
    const { loginToken, userID } = this.props;

    if (filterTags.length > 0) {
      contentRequests = this.filterByTags();
    }

    return (
      <RequestList>
        {contentRequests.map(request => (
          <ContentRequest
            contentRequests={contentRequests}
            key={request.id}
            loginToken={loginToken}
            request={request}
            setOverViewpageState={this.setOverViewpageState}
            userID={userID}
          />
        ))}
      </RequestList>
    );
  };

  render() {
    const { contentRequestTags, filterTags } = this.state;
    return (
      <MainContainer>
        <PageTitle>Content Request Overview</PageTitle>

        <TagSelectForm
          onTagSelectChange={this.handleTagSelectChange}
          options={contentRequestTags}
        />

        {this.renderRequests()}
      </MainContainer>
    );
  }
}

export default OverviewPage;

const MainContainer = styled.div`
  box-sizing: border-box;
  display; flex;
  flex-direction: column;
  max-width: 768px;
  margin: 0 auto;
  padding: 0.5rem;
`;

const PageTitle = styled.h1`
  font-size: 1.25rem;
`;

const RequestList = styled.ul`
  list-style-type: none;
  padding: 0;
`;