Скрыть раскрывающийся список при нажатии или прокрутке снаружи

Question

Я хочу закрыть раскрывающийся список после нажатия или прокрутки за пределами панели.Тем не менее, выпадающий список открыт все время, когда мы прокручиваем за пределы выпадающего списка. Это мой код ..

static defaultProps = { // <-- DEFAULT PROPS
          wrapperStyle: {
            display: 'inline',

             }, 
          menuStyle: {
                borderRadius: '3px',
                boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
                padding: '2px 0',
                fontSize: '90%',
                position: 'fixed',
                minWidth: '300px',
                overflow: 'auto',
                maxHeight: '250px',
                display: 'inline', 
              }  
    }

..............................................................

<ReactAutocomplete
                                name="ReferredBy"

                                items = {patientsMasterData.ReferredBy && patientsMasterData.ReferredBy.map(referredObj =>(
                                    {options:referredObj.RefName, 
                                   values:referredObj.RefID}
                                  ))
                                }

                                shouldItemRender={(item, value) => item.options.toLowerCase().indexOf(value.toLowerCase()) > -1}
                                getItemValue={(item) => item.options}
                                renderItem={(item, highlighted) =>
                                    <div
                                    key={item.values}
                                    style={{ backgroundColor: highlighted ? '#3db4e5' : '#FFFFFF',cursor:'pointer', border:'1px solid lighten($grey-element,30%)',padding: '5px}}
                                    {item.options}</div>}
                 inputProps={{placeholder:'Select...'}}
                                menuStyle={this.props.menuStyle}
                                wrapperStyle={this.props.wrapperStyle}
                                value={this.state.value}
                          onChange{e=>this.setState({value:e.target.value})}
                                onSelect={value => this.setState({ value })}

                       />

& часть css,

&_value1 {
              flex:2;
              white-space: normal;
              width: 100%;
              // overflow-y: auto;
              font-size: 14px;
              position: relative;
              z-index: 2;
              display: inline-block;
              input, textarea {
                width: 100%;
                min-width: 200px;
                height: 25px;
                border: 1px solid $grey-element;
                padding: 0 8px;
                font-size: 12px;   
              }
             &::after {
                position: absolute;
                right: 9px;
                top: 10px;
                content: '';
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 6px 3px 0 3px;
                border-color: $black transparent transparent transparent;
              }   }

Как скрыть раскрывающийся список при прокрутке снаружи?

Answer 1

const toggleDropdown = () => this.setState({ isDropdownOpen: !this.state.isDropdownOpen });

const closeDropdownThen = fn => (...params) => {
  this.setState({ isDropdownOpen: false });
  return fn(...params);
};

под рендером вы должны определить эту константу, как указано выше.И когда вы используете

       <Dropdown
            isOpen={isDropdownOpen}
            toggleDropdown={toggleDropdown}
            className={s.dropDownContainer}
            label="Export"
          >
            <DropdownItem onClick={closeDropdownThen(this.abcFunction)}>
               CSV
            </DropdownItem>

, это мой компонент dropDown, возможно, он вам поможет.С уважением

Answer 2

В двух словах: вам нужно добавить прослушиватель событий, когда раскрывающийся список открыт, и сделать ссылку на раскрывающийся список, чтобы избежать события щелчка в раскрывающемся списке, но запустить его при щелчке в другом месте (и удалить обработчик событий здесь).Также вы можете прослушать прокрутку событий.Это пример реализации:

import React, {Component} from 'react';
import { CSSTransition } from 'react-transition-group';

class Dropdown extends Component {
    constructor(props) {
        super(props);
        this.setWrapperRef = this.setWrapperRef.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
    };

    setWrapperRef(node) {
        this.wrapperRef = node;
    };

    handleClickOutside(e) {
        e.stopPropagation();
        if (this.wrapperRef && !this.wrapperRef.contains(e.target) && this.props.isOpen){
            this.props.onClose();
        }
    };

    componentDidUpdate(){
        if(this.props.isOpen){
            document.addEventListener('mousedown', this.handleClickOutside);
        } else {
            document.removeEventListener('mousedown', this.handleClickOutside);
        }
    }

   render(){
       return (
            <div className={"dropdown " + (this.props.isOpen ? "show" : "hide")} ref={this.setWrapperRef}>
                <CSSTransition in={this.props.isOpen} timeout={300} classNames="fadeIndown" unmountOnExit={true}>
                        {this.props.children}
                </CSSTransition>
            </div>
        )
    }
}

export default Dropdown;