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?

Answer 1

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>