React-Select inside react-select

Question

I have created react select inside a react select menu list, currently, the issue is that when I click the inner react select component the outer react select component menu list gets closed how to fix this issue?

Main component

const CustomCalender = props => {
    return (
      <div>
        <Calendar props={props} />
      </div>
    );
  };

  return (
    <div>
      <Select
      options={[{label:moment(),value:moment()}]}
        components={{ Option: CustomCalender }}
        styles={customStyles}
        maxMenuHeight="200"

      />
    </div>

Calendar component

                <Select
                     openMenuOnFocus={true}
                     openMenuOnClick={false}
                    className="basic-single"
                    classNamePrefix="select"
                    name="color"
                    options={this.state.colourOptions}/>

Tabish Javed Tabish Javed · Accepted Answer · 2020-06-30T19:47:43

Have you tried stopping propagation

  <div>
    <Calendar props={props} />
  </div>

to:

  <div onBlur={e => e.stopPropagation()}>
    <Calendar props={props} />
  </div>

React-Select inside react-select

1 Answers