I use material-ui to create an input box with a drop-down list. If you click outside the list or input fields, the list should be hidden.

I use Popper for the drop-down list, and ClickAwayListener to define clicks outside the list or input ClickAwayListener . But the problem is that with disablePortal={true} other components appear through the list that are just below the input field (for example, another text field and a button). But with disablePortal={false} this problem is solved, but another one appears. When you click on a list item, ClickAwayListener triggered ClickAwayListener as a result, the state changes to "close the list" and click on the list item does not work.

I cannot ClickAwayListener and wrap the <MenuList> it, because then when I click on the input field, the list will close.

How can I solve the problem so that other components are not visible from under the list, and you can click on the items on the list?

  <div> <ClickAwayListener onClickAway={this.closeAutoCompleteList}> <div> <TextField autoFocus onFocus={this.openAutoCompleteList} inputRef={node => this.productInput = node} fullWidth label='Product name' placeholder='Start typing a name of the product and then select suggested variant.' value={this.state.textfield_value} onChange={this.onChangeTextfield}/> <Popper placement='bottom-start' open={this.state.autocompleteOpened && this.state.suggestions.length > 0} anchorEl={this.productInput} disablePortal={false}> <Paper className={classes.paper} style={{width : this.productInput ? this.productInput.clientWidth : null}}> <MenuList> {this.state.suggestions.map((product) => { return <MenuItem onClick={() => this.onAutoItemClick(product)} key={product.product_id}> {product.title} </MenuItem> })} </MenuList> </Paper> </Popper> </div> </ClickAwayListener> { this.state.loaded_product && <div className={classes.content}> <Product product={this.state.loaded_product}/> <GenerateForm/> </div> } </div>

    0