microsoft / microsoft/azure-devops-extension-sdk

MenuButton Component Click Scrolls to Top of Page

Open
#98 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.