DateRangePicker's dialog jumps around

[Eldemarkki]

What package has an issue

@mantine/dates

Describe the bug

If you create a DateRangePicker and a list with data that depends on the value of the DateRangerPicker, the picker dialog will jump around. Here's a video to show the bug:

https://user-images.githubusercontent.com/38920928/159139584-965c77e9-042e-481c-94f2-d69b2bd90b78.mp4

In which browser did the problem occur

Firefox and Chrome

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/unruffled-cdn-xj438w

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[rtivital]

Seems like an issue with popper.js

[ercgrat]

Some investigation notes on this:

• Only happens if withinPortal is true
• Popper expected behavior is only to rerender on resize/scroll, not layout changes according to this issue
• I was able to verify that manually scrolling fixes the positioning when reproducing this.
• Dispatching a scroll event programmatically on value change in DateRangePicker.tsx fixes this, but there's still very slight visual jank (looks like it's shifting up by a pixel). Seems like it would be wise to just avoid dynamically modifying siblings of the date range picker instead of having the Mantine library fix this?

  const handleValueChange = (range: [Date, Date]) => {
    setValue(range);
    window.dispatchEvent(new Event('scroll'));
    if (closeCalendarOnChange && validationRule(range)) {
      setDropdownOpened(false);
      onDropdownClose?.();
      window.setTimeout(() => inputRef.current?.focus(), 0);
    }
  };

  

[rtivital]

I think it does not really worth fixing, in v5 we will migrate to floating ui and disable portals by default, for now, set withinPortal={false}