Datepicker not clearing the edge of table

Question

I'm having a rather stubborn DatePicker that I can't seem to get to behave. I'm using react-datepicker's DatePicker component.

I have a table, where each row has a DatePicker. Opening the calendar view of the date picker seems to not clear the edge of the table:

I have tried setting style={{zIndex: "9999 !important"}} on the table to no avail. This appears to be the only solution anyone ever recommends.

The bit of code using the DatePicker component looks like this:

<Row>
    <Col>
        <DatePicker
            onChange={onChangeCallback(user.id)}
            autoComplete="off"
            shouldCloseOnSelect={false}
            dateFormat="dd-MM-yyyy"
            selected={date}
            placeholderText="Vælg Dato..."
            clearButtonTitle="Ryd"
            isClearable
        />
    </Col>
    <Col>
        <Calendar
            color="#ff7e01"
            className="align-middle"
            size={18}
        />
    </Col>
</Row>

with Row and Col imported from reactstrap.

Interestingly, the DatePicker acts correctly when not using Row and Col, so something in there must be causing this interference.

Any clues?

@isherwood I'm a back-end dev on front-end duty. How do I do any of this? — Electric Coffee, Feb 01 '22 at 14:46
At a quick glance, you might find a [property](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) to change where the popup attaches to the DOM. — isherwood, Feb 01 '22 at 14:47
Otherwise, inspect the page with your browser and see what element has `overflow: hidden`. Try changing that to `visible` and see if your layout blows up. — isherwood, Feb 01 '22 at 14:48
I did try setting `overflow: visible`, that didn't work either — Electric Coffee, Feb 01 '22 at 14:51
I tink there is an overflow:hidden on the Col / Row, have you tried changing those as well? — I am L, Feb 01 '22 at 14:54
I set it on the row and the col and the component itself, and it still doesn't clear the table. Is it perhaps because I'm doing it in-line with the component rather than using actual CSS? — Electric Coffee, Feb 01 '22 at 14:56
https://stackoverflow.com/questions/64254322/react-date-picker-is-being-hidden-behind-overflow-parent-popover-fixed-placemen — isherwood, Feb 01 '22 at 14:57

nesbocaj · Accepted Answer · 2022-02-03T13:47:44.660

I know you've already tried the position: fixed option, but as ccallendar alludes to, the library @popperjs/core used by datepicker-react has changed since then, more specifically:

"7. Change positionFixed

In Popper 2, this is now the strategy option:
createPopper(reference, popper, {
  strategy: 'fixed',
});
"

-- https://popper.js.org/docs/v2/migration-guide/#7-change-positionfixed

Applying that to your question, then this should work:

<Row>
    <Col>
        <DatePicker
            onChange={onChangeCallback(user.id)}
            autoComplete="off"
            shouldCloseOnSelect={false}
            dateFormat="dd-MM-yyyy"
            selected={date}
            placeholderText="Vælg Dato..."
            clearButtonTitle="Ryd"
            isClearable
            popperProps={{ strategy: "fixed" }}
        />
    </Col>
    <Col>
        <Calendar
            color="#ff7e01"
            className="align-middle"
            size={18}
        />
    </Col>
</Row>

you saved my day TTYYY – alireza alizade Jul 19 '23 at 18:53 — alireza alizade, Jul 19 '23 at 18:53

Datepicker not clearing the edge of table

1 Answers1