Семантический пользовательский интерфейс календаря реагирует на реагирующую сетку данных, пользовательский редактор теряет фокус?

Question

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

Цель: включить навигацию с помощью клавиатуры для средства выбора даты Семантического календаря с помощью пользовательского редактора сетки реагирования

Встроенная демонстрация: третий столбец для выбора даты https://codesandbox.io/embed/8l4jkor19

Текущее поведение:

• двойной щелчок по ячейке даты во всплывающем календаре
• нажмите клавиши со стрелками на клавиатуре, и выбранная ячейка будет изменена, календарь исчезнет

Разыскиваемое поведение:

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

Официальные примеры: первая ячейка ввода https://arfedulov.github.io/semantic-ui-calendar-react/

Любые комментарии будут оценены, Большое спасибо

Answer 1

Обходным решением является добавление прослушивателя событий в customEditor. В то время как левый и правый все еще могут перемещаться по календарю, установить его состояние и продолжать отслеживать.

  constructor(props) {
    super(props);
    this.state = { 
      dateEditor: props.value,
      selectedDate: props.value
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyDown, true);   
  }   
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown, true);   
  }

  handleKeyDown = (e) => {
    if (e.keyCode === 37) {
      // Arrow left subtract one day
      this.setState({ selectedDate: moment(this.state.selectedDate).subtract(1, 'days').format('L')});
    }
    if (e.keyCode === 39) {
      // Arrow right add one day
      this.setState({ selectedDate: moment(this.state.selectedDate).add(1, 'days').format('L')});
    }
    if (e.keyCode === 13) {
      // Enter will commit selected date
      let value = this.state.selectedDate;
      this.setState({ ["dateEditor"]: value }, () => this.props.onCommit());
    }   
  };