microsoft / microsoft/azure-devops-extension-sdk
MenuButton Component Click Scrolls to Top of Page
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 159
- Forks
- 53
- PR merge metrics
- No merged PRs in 30d
Description
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the vanilla MenuButton example from the linked documentation inside a Work Item Form Group iframe, then observe the parent page's scroll position on the first click. Done means identifying an actionable fix or confirmed ownership in the SDK or the referenced azure-devops-ui component so the parent page no longer jumps to the top.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100