Datepicker popover position with CustomInput prop is always at the center of the CustomInput container, regardless of which element ref is attached

[praneetha-ck-ps]

Describe the bug The Datepicker popover position is always in the middle of CustomInput, it does not consider the ref element's position.

To Reproduce In the following example, despite ref being set on the button, the calendar popover is positioned with respect to the outer div, specifically positioned with respect to center of div.

() => {
  const [startDate, setStartDate] = useState(new Date());
  const buttonRef=React.useRef(null);
  const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
  <div style={{display:'flex', border:"1px solid red", justifyContent:"space-between"}}>
  {value}
    <button className="example-custom-input" onClick={onClick} ref={ref}>
      >>
    </button>
    </div>
  ));
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      customInput={<ExampleCustomInput />}
    />
  );
};

Expected behavior Calendar popover should be positioned with respect to the button

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

[github-actions[bot]]

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.

[BrendanThysse]

Any update on this as it seem to still be an issue on the latest version 7.6.0?

[BrendanThysse]

@martijnrusschen any update on this issue? Seems like floating-UI element reference is always bound to div.react-datepicker-wrapper element and not to the element where the ref is set in the custom input?

[ilchenkoArtem]

I have the same issue, how can I set Custom reference for the popover target?