Кнопка с выпадающим списком - onBlur запускается клавишей табуляции, несмотря на то, что все еще находится в фокусе - PullRequest
Новая
       34

Кнопка с выпадающим списком - onBlur запускается клавишей табуляции, несмотря на то, что все еще находится в фокусе

0 голосов
/ 20 мая 2019

У меня есть кнопка с выпадающим списком.На внешнем контейнере div я установил функцию onBlur, в которой раскрывающийся список будет свернут, когда компонент больше не находится в фокусе.

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

Когда я удаляю функцию коллапса на упоре 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>
...