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}/>
Have you tried stopping propagation
<div>
<Calendar props={props} />
</div>
to:
<div onBlur={e => e.stopPropagation()}>
<Calendar props={props} />
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.