MiddleWare offset not working

[AlexandrTokarev]

I'm trying to change the dropdown offset. But no matter what values I set, its position does not change:

Sandbox: https://codesandbox.io/p/sandbox/quizzical-fog-datepicker-test-qsnp8z

[AlexandrTokarev]

There is also no way to override middleware flip... I need to specify mainAxis: false. I got around it like this:

But I think there needs to be a better way to do this.

[hugoburguete]

This worked for me:

import DatePicker from "react-datepicker";
import { offset } from "@floating-ui/react";

...

<DatePicker
  ...myProps
  popperModifiers={[
    offset(20)
  ]}
/>

It may be worth checking what your middlewares variable is outputting.

EDIT: Flip seems to have worked for me as well with

      popperModifiers={[
        flip({ padding: 5 }),
      ]}

I couldn't load your sandbox example but hope these examples are of any help

[arajpaul]

There is also no way to override middleware flip... I need to specify mainAxis: false. I got around it like this:

But I think there needs to be a better way to do this.

I have the same issue and this is the only solution that worked. Setting popperModifiers doesn't override the existing middleware the datepicker has.

[OvechkinDmitry]

I encountered a similar problem and found this solution working for me:

popperModifiers={[
        {
          name: 'placement',
          fn: (state) => {
            const { placement, y } = state;

            return {
              ...state,
              y: placement.startsWith('bottom') ? y - 10 : y + 10, // condition for auto placement
            };
          },
        },
      ]}

current version:

"react-datepicker": "^7.1.0"