search

microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
924 stars 287 forks source link

[BUG] person picker allowing clicks to elements underneath it #2109

Closed bh3605 closed 1 year ago

bh3605 commented 1 year ago

Describe the bug I'm using a pretty stock people picker in my angular component

<mgt-people-picker #peoplePickerComp type="any" selection-mode="single" (selectionChanged)="selectionChanged($event)">
</mgt-people-picker>

When the flyout component renders the list of people to select from I'm finding I'm able to "miss" the person I want to click and I'm able to click on elements underneath the picker. That includes a few checkboxes my users aren't intending on clicking on. When I click on a spot that's directly over the checkbox then the checkbox underneath is set to checked/unchecked and the person I meant to click on isn't loaded.

Now this checkbox isn't a normal checkbox. It's one of our design components that's also using the shadow dom. You're able to highlight it underneath the picker.

To Reproduce I tried replicating this by replacing my design components using the shadow dom with a bunch more mgt-person-pickers to see if they were allowing the same behavior. They weren't. I don't know if this is a bug with our design components to allow to be selected underneath other shadow dom elements or if it's a bug with your component that's allowing elements underneath it to be "highlighted" and selected.

Expected behavior I'm able to click on the person I intended regardless of what's underneath the picker.

Screenshots Screenshot of me highlighting the shadow dom checkbox underneath the picker. Clicking anywhere inside the blue box will check the checkbox and not the person. image

ghost commented 1 year ago

Hello bh3605, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

musale commented 1 year ago

Hello @bh3605 I have tried replicating this here https://stackblitz.com/edit/angular-uwbzkx?file=src/main.ts. I'm not sure I have captured your scenario well. Could you update it for easier reproduction?

bh3605 commented 1 year ago

I'll see what I can do

bh3605 commented 1 year ago

I found the cause. The input element in our web component has a z-index set to 2. Whomp whomp.

No bug on your part.