FilterBar flickers and doesnt actually open if embedded in material ui

[roopakv]

I am trying to embed the sarif component in material UI full-screen dialog. However every time I click on anything in the filter bar it flickers open and closed.

I tried looking at azure-devops-ui package, however, the GitHub repo is private and only the package is published.

@jeffersonking, would love if you might be able to point me in the right direction on how I can debug and then potentially send a fix.

[roopakv]

My guess based on looking at code in the node_modues folder is that DropdownCallout has a setTimeout that is doing funky things.

[jeffersonking]

I haven't had a chance to investigate yet, but if the root cause is DropdownCallout then that's something I don't have direct control over (even though that team is also inside Microsoft).

[roopakv]

@jeffersonking, is there any reason the repo is private while the npm module is published? would you be able to ask them?

also would you be open to me submitting using a different dropdown filter which doesn't depend on az-devops-ui?

[jeffersonking]

My contacts might be out-of-date, but @nkirchem works on that project and may be able to answer.

Regarding "submitting using a different dropdown filter", we use this internally as a DevOps Extension and thus would prefer to keep the current component(s). We have also done accessibility testing for this set of components. Switching to a new one (even if visually compatible) would require re-testing.

Any ways we could workaround this issue?

[roopakv]

@jeffersonking, what if we made an optional param that allows swapping out the dropdown?

@nkirchem if the code for azure-devops-ui could be opened up on GitHub (the npm module makes it available anyway) then ti would be easier to contribute a fix

[roopakv]

fwiw, it isnt rreally a flicker, but basically the filter box doesn't open at all.

it opens and closes immediately

[jeffersonking]

@roopakv I'd recommend exhausting other options before adding (and forward-maintaining) a dropdown option. Do you happen to have a repro I could look at? If you already have Material UI set up that could help me out. Thanks.

[roopakv]

@jeffersonking it is in a private repo, but I can try to make a minimal repro.

FWIW it happens only when opened in a fullscreen dialog, otherwise, it works fine on material.

https://material-ui.com/components/dialogs/#full-screen-dialogs

I thought it was z-index related but it didn't seem to be