arqex / arqex/react-datetime

Using react-datetime inside a data table

Open
#639 4 comments 7 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
2k
Forks
858
PR merge metrics
No merged PRs in 30d

Description

I am trying to use a react-datetime component inside a fixed-data-table-2 cell. Unfortunately, the pop-up is always hidden inside the cell, making the component useless.

I almost made this work by using React Portals to teleport the component outside the cell, but this breaks the tab order and causes issues when scrolling.

I think I will have to portal the pop-up itself out of the table, while keeping the input inside, but I have no idea how to do that. Has anyone made something like this work?

I know react-select (https://github.com/JedWatson/react-select) has built-in portal support, for this specific reason, so it would be amazing if something similar could be implemented for this component.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the hidden react-datetime pop-up inside a fixed-data-table-2 cell and inspect how the component currently renders its pop-up. Done means adding portal support for the pop-up while keeping the input in the cell and preserving tab order and scrolling behavior; no files or tests are named in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.