People Picker - TabIndex (focus) does not work in version 1.7+ (but it works in version 1.6)

[anthonynhn]

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

[ ] Enhancement

[x ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.7.0, 1.8.0, 1.9.0, 1.10.0 ]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

Issue: expect to use the TAB button to move between the controls, but the issue happens at the control PeoplePicker with version 1.7.0 or above. Steps to reproduce:

1. Click the mouse the the editable control People Picker (with itemLimit = 1)
2. Fill in the value for the people picker as expected just by keyboard, then, we expect the control to be disabled (because the itemLimit is 1).
3. Try clicking the button TAB to move to the next control, AND IT DOES NOT WORK. THE TAB moves to the top of the page.

Expected Behaviour: at step 3, clicking the button TAB should move the focus from the People Picker control to the next control.

Observed Behavior

As above. However, we tried with the version 1.6.0 and there is no such issue. The issue just happens at the later versions.

Steps to Reproduce

As above.

Thank you.

[AsishP]

@anthonynhn, thanks for reporting this. I have to replicate the issue to confirm it.

Just to confirm, I suppose 1.7 brought something new because of the new Fabric control that might be conflicting. Have you tried the latest version and see if it fixed. We did fix a bunch of stuff in the latest release. Thanks.

[anthonynhn]

@AsishP thank you for your reply.

I have tried on all newer versions (i.e. 1.7, 1.8, 1.9, and 1.10) but the issue is not resolved in these newer versions.

Basically, if the control PeoplePicker reaches its item limit (i.e. the control is disabled) and a user clicks the button TAB, the focus will jump to the left right corner of the page (this is wrong, the focus should jump to the next control). Thank you.

[anthonynhn]

can you please advise about the status of this bug ? thank you.

[michaelmaillot]

Hi @anthonynhn,

I just tried in latest version (3.16.1) and it works. When clicking on TAB button once the principal is selected, first the cursors selects the remove button, then it goes on the next control when clicking the TAB button a second time. See capture below:

Is this the expected behavior?

Have you got the chance to try recently?

[ghost]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within next 7 days of this comment. Thank you for your contributions to SharePoint Developer activities.

[ghost]

Closing issue due no response from original author. If this issue is still occurring, please open a new issue with additional details. Notice that if you have included another related issue as additional comment on this, please open that also as separate issue, so that we can track it independently.

[DileepA-123]

Hi I am using the people picker 4.2.1 . in this version i am unable to use the keyboard navigations. It Is failing. Can you please check in this version and update me the status please.

[michaelmaillot]

Hi @DileepA-123,

Sorry but this issue has been closed. Furthermore, we're not maintaining version 1.x & 2.x.

You can open a new one but first: are you sure you're refering to the right repo? Our latest version is 3.20.0 and you're mentioning 4.2.1.

[DileepA-123]

Hi @michaelmaillot

I am using people picker in my code. i ma using people picker from "@microsoft/mgt-react": "4.2.1",

Here the issue are Shift + Tab is not working when the focus on People picker

[DileepA-123]

https://learn.microsoft.com/en-us/graph/toolkit/components/people-picker?tabs=html#properties

This is i am using in my code. But i am unable to use keyboard navigations

[michaelmaillot]

Ok I see. You're referring to this repo which is completely different from the one maintained here.

I suggest you to open an issue on mgt-react repo, mentioned in the link.