Expose Popup ref and reposition method

[vladimirivanoviliev]

I'm submitting a...

• Suggestion for improvement

Current behavior

Currently the Popup and the DatePicker does not reposition on scroll in third party scroll components like react-perfect-scrollbar. The reason for this is that the Popup listens to scroll events to update its position when rendered in portal, however these scroll components does not emit such events. What I suggest to improve this behaviour is:

1. Expose the reposition() method of the Popup in the PopupHandle - this will allow us to call it when the scrollbar scrolls for example
2. Expose the Popup ref prop in popupSettings of components like DatePicker. This will allow us to call the above method from the ref.

Our temporary workaround is to depend on the above two-points-solution to manually reposition the Popup, however this does not go well with Typescript. Of course if there is better approach let us know.

Expected behavior

We should be able to use Kendo components in third party scrollbars.

Minimal reproduction of the problem with instructions

Open the demo, open the DatePicker and then try to scroll the container. The popup is not aligned with the input.

• https://codesandbox.io/s/objective-chebyshev-ype2u7?file=/app/main.tsx

Environment

Package versions:

• 5.7.0

Browser:

• Chrome (desktop) version latest
• Safari (desktop) version latest

[nstoychev]

Just a hint to give you here which could help.

You can use Popup's contentKey prop. Setting its value and then changing it will reposition the popup - https://codesandbox.io/s/agitated-tdd-sw1bt4?file=/app/main.tsx

Currently it is marked as hidden for internal use only and there is no plan to change it. It is more likely to make it public.

[vladimirivanoviliev]

Thanks for the suggestion. Also please consider exposing it to the public API as it would be helpful for us to know if it changes someday.