Semantic UI calendar react on react data grid custom editor lose focus?

Question

After some investigation I think the problem might occur because react data grid is focus on cell and unchanged even the calendar pops out. However, many examples are using focus on input, not sure how to tweak the code and make it focus properly

Goal: Enable keyboard navigation for the Semantic calendar date picker work with react data grid custom editor

Built Demo: Third column for date picker https://codesandbox.io/embed/8l4jkor19

Current behavior:

double click on date cells pop up the calendar
press keyboard arrow keys and the selected cell were changed, calendar disappears

Wanted behavior:

double click on date cell pop up the calendar
press Keyboard arrow keys that navigates on calendar dates and press enter to select

Official Examples: first input cell https://arfedulov.github.io/semantic-ui-calendar-react/

Any comments will be appreciated, Many thanks

score 0 · Answer 1 · answered May 01 '19 at 22:23

The work around solution is add event listener in customEditor While left and right can still navigate on the calendar, set a state for that and keep tracking.

  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());
    }   
  };

Semantic UI calendar react on react data grid custom editor lose focus?

1 Answers1