Question

我有一个带下拉菜单的按钮。在外部div容器上，我设置了一个onBlur函数，当组件不再处于焦点时，下拉列表将折叠。

我可以使用Tab键，然后按enter键来展开下拉列表。但是，当我再次按Tab键以下拉列表中的列表时，下拉列表将折叠。

当我删除onBlur道具上的折叠功能时，我不再遇到此问题，因此我可以在下拉列表中选择项目列表。但是，这使我无法通过单击或制表该组件外部的任何位置来折叠下拉列表。

当我在列表中选择项目时，为什么会触发onBlur函数？当然，我仍然专注于该组件，它不应该执行onBlur。

      <div 
        className={containerClass} 
        onBlur={() => this.setState({ currentHeight: 0 })} <----- issue
      >

        <div className="dropdown__button__row">
            <button
              type="button" 
              className={`dropdown__button__container ${buttonClass}`}
              style={{background: this.color(buttonVariant)}} 
              onClick={this.handleRowExpand}
              onKeyPress={this.handleRowExpand}
              ref={(ref) => { this.button = ref }}
            >
                <div className="button__inner__container">
                  <p className="dropdown__button__name">
                    {children}
                  </p>
                  <div className="dropdown__chevron-icon">
                    <Chevron
                      direction="down"
                      color="#ffffff"
                      width="12"
                      height="8"
                      className="dropdown__button__chevron"
                    />
                  </div>
                </div>
            </button>
        </div>

        <div 
         className={answerClass} 
         style={contentStyle} 
         ref={(ref) => { this.expandRow = ref }}
        >
          <div 
            className="expand__content" 
            ref={(ref) => { this.expandContent = ref }}
           >
            <div className="content">

              <div className="dropdown__button__expandable__container">
              {
                options.map(option => {
                  return (
                    <div 
                      className="dropdown__button__list-item" 
                      key={option.id}
                    >
                      <div className="dropdown__list__container">
                        <Paragraph size="medium">
                          <a className="dropdown__list__anchor" href= 
                           {option.url}>{option.label}
                          </a>
                        </Paragraph>
                      </div>
                      <div className='chevron__container'>
                        <Chevron
                          color='#000000'
                          direction='right'
                          width="12"
                          height="12"
                          className="mark"
                        />
                      </div>
                    </div>
                  )
                })
              }
              </div>
            </div>
          </div>
        </div>
      </div>

带有下拉菜单的按钮-尽管仍处于焦点状态，但使用Tab键触发了onBlur

0 个答案: