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"

[Kamii]

I had the same problem and solved it with @AlexandrTokarev solution.

I think the bug is on this lines:

react-datepicker/src/with_floating.tsx

Lines 56 to 60 in 600a3d8

	middleware: [
	flip({ padding: 15 }),
	offset(10),
	arrow({ element: arrowRef }),
	...(props.popperModifiers ?? []),

Spreading props.popperModifiers will not override the modifiers on the lines above. It will only create new objects at the end of the array.

I'm running the latest version (8.0.0)

[nik-webdevelop]

Bump!

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions]

This issue was closed because it has been stalled for 10 days with no activity.