microsoft / azure-devops-extension-sdk

Client SDK for developing Azure DevOps extensions
MIT License
122 stars 38 forks source link

MenuButton Component Click Scrolls to Top of Page #98

Open pbcahill opened 6 months ago

pbcahill commented 6 months ago

When using a basic MenuButton component in a Work Item Form Group contribution, whenever the MenuButton is first clicked, the page/window automatically scrolls back up to the top. I am not telling it to do that. Even does it with the vanilla example from that documentation once rendered in a work item form.

Since the MenuButton lives in a custom Work Item Form Group, it is being rendered in an iframe. So it seems like a bug to have the parent window outside of the iframe scroll to the very top of the page when the button in clicked.

I have tried many things to prevent the scroll, like e.preventDefault() and e.stopPropagation() in the onClick event, as well as trying to prevent scroll by access window.parent... events, but I get a cross origin error since the extension technically is hosted on a different domain that the ADO portal itself. Have also tried various document.scroll events to no avail.

This behavior of the page scrolling up to the top every time I click the MenuButton makes it unusable. As I will have multiple of these buttons, which will often be in positions where the user will have to scroll down to get to them.

I also opened an issue on Developer Community for this. Wasn't sure the best place to open since the "azure-devops-ui" repo that MenuButton component lives in is not publicly exposed.