Keyboard navigation on react data grid custom editor with semantic ui calendar date picker

Question

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 disapears

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/

Question: Does anyone encountered the similar situation? Not exactly know where the problem occurs and how to investigate. Many thanks

Answer 1

It happens because you lose focus from the dom node.

try using the following code inside you custom editor.

getInputNode = () => {
    // eslint-disable-next-line react/no-find-dom-node
    return ReactDOM.findDOMNode(your calender id selector);
}