JavaScript Реакция на ошибку: выпадающий элемент остается открытым при нажатии - PullRequest
Новая
       34

JavaScript Реакция на ошибку: выпадающий элемент остается открытым при нажатии

0 голосов
/ 08 января 2020

Я пытаюсь использовать выпадающее меню для шашлыка, но оно не закрывается при повторном нажатии. Он закрывается, когда вы щелкаете в любом месте снаружи или когда выбираете элемент в раскрывающемся списке, но не закрывается, когда вы нажимаете на фактический значок, который открывает его.

Я использую точно такой же код рядом с другим выпадающим списком (другой компонент реакции), и это работает нормально, поэтому я не уверен, откуда возникла проблема. Я добавил функцию onFocus, но это тоже не решило проблему.

Пожалуйста, помогите мне выяснить, что происходит.

У меня есть следующий код: 

this.state = {
      isToolbarDropdownOpen: false,
      isToolbarKebabDropdownOpen: false,
    };

this.onToolbarDropdownToggle = isToolbarDropdownOpen => {
      this.setState({
        isToolbarDropdownOpen
      });
    };

    this.onToolbarKebabDropdownToggle = isToolbarKebabDropdownOpen => {
      this.setState({
        isToolbarKebabDropdownOpen
      });
    };

   this.onToolbarDropdownSelect = event => {
      this.setState({
        isToolbarDropdownOpen: !this.state.isToolbarDropdownOpen
      });
    };


    this.onToolbarKebabDropdownSelect = event => {
      this.setState({
        isToolbarKebabDropdownOpen: !this.state.isToolbarKebabDropdownOpen
      });
      this.onFocus();
    };

    this.onFocus = () => {
      const element = document.getElementById('toggle-id-6');
      element.focus();
    };



 /* this works! */
      <DataToolbarItem>
      <Dropdown
            onSelect={this.onToolbarDropdownSelect}
            position={DropdownPosition.right}
            toggle={<DropdownToggle onToggle={this.onToolbarDropdownToggle}>Creator</DropdownToggle>}
            isOpen={isToolbarDropdownOpen}
            dropdownItems={filterDropdownItems}
          />
      </DataToolbarItem>

 /* this doesn't work! */
      <DataToolbarItem>
        <Dropdown
          onSelect={this.onToolbarKebabDropdownSelect}
          toggle={<KebabToggle id="toggle-id-6" onToggle={this.onToolbarKebabDropdownToggle} />}
          isOpen={isToolbarKebabDropdownOpen}
          isPlain
          dropdownItems={toolbarKebabDropdownItems}
        />
...