react-select input closes before I can (mouseclick) select an option

Question

EDIT: this problem happens in Firefox (Ubuntu 16), but using Chrome I don't have the problem.

Using React.js, and react-select, I have the following situation:

When I click on the select input, the dropdown with options shows, but it closes almost immediately.

Desired behavior: keep it open until I select an option.

Does anyone know why this is happening?

Here is my code (some of it at least).

component containing the select input:

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;

Parent component:

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;
`;

Answer 1

I have resolved this issue by wrapping react-select in "label" tag, so my code looks like:

   <label>
      <Select
       name="name"
       options={optionsArray}
       ...
      />
   </label>