Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Dropdown in panel - focus is not set on first item #24280

Closed
2 tasks done
nvazhayil opened this issue Aug 8, 2022 · 9 comments · May be fixed by #27412
Closed
2 tasks done

[Bug]: Dropdown in panel - focus is not set on first item #24280

nvazhayil opened this issue Aug 8, 2022 · 9 comments · May be fixed by #27412
Labels
Component: Dropdown Fluent UI react (v8) Issues about @fluentui/react (v8) Good First Issue 🏆 Resolution: Soft Close Soft closing inactive issues over a certain period Status: In PR Type: Bug 🐛

Comments

@nvazhayil
Copy link

nvazhayil commented Aug 8, 2022 •
edited
Loading

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 19.26 GB / 31.62 GB
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.47)
    Internet Explorer: 11.0.19041.1566

Are you reporting Accessibility issue?

yes

Reproduction

https://codepen.io/dbjorge/pen/qBpMabe

Bug Description

Actual Behavior

https://fabricweb.z5.web.core.windows.net/oufr/8.55.3/#/examples/dropdown
This is related to behavior of dropdown when accessed via keyboard. When the browser is maximized, pressing on spacebar will open the dropdown inline and when you press DOWN arrow, the 2nd item in the list is selected.

image

Now, resize the browser so that when we press on spacebar, the dropdown opens as a panel. Press DOWN arrow and you will see that the 3rd item in the list is selected.

image

On navigating the dropdown via arrow keys on keyboard, there is inconsistency in the item that is selected, when the browser is maximized and resized.

Expected Behavior

The selected item should be consistent irrespective of whether the browser is maximized or resized.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@micahgodbolt micahgodbolt changed the title [Bug]: [Bug]: Dropdown in panel - focus is not set on first item Aug 22, 2022
@micahgodbolt micahgodbolt moved this to Parking-Lot in Fluent UI - Shield Priors Aug 22, 2022
@Hotell
Copy link
Contributor

Hotell commented Sep 14, 2022

Hi @nvazhayil , thanks for your report!

Can you help us understand the problem better ? The reproduction and your described issue are for 2 separate things.

ty

@nvazhayil
Copy link
Author

This is easily reproducible at https://fabricweb.z5.web.core.windows.net/oufr/8.55.3/#/examples/dropdown
Resize browser and try to access dropdown items via keyboard(DOWN arrow). You should see inconsistency with the item that gets selected.

@gouttierre
Copy link
Contributor

@nvazhayil - Thanks for providing more input into the problem you are experiencing. This issue has been queued for upcoming investigations. To set expectations the developers will review this issue once capacity allows and all updates will be posted on the issue accordingly.

@msft-fluent-ui-bot
Copy link
Collaborator

Gentle ping that this issue needs attention.

@TristanWatanabe
Copy link
Member

Issue still repros and can be observed when viewport is less than 640px. This is caused by the incorrect list id index being passed to the firstFocusableTarget of the focusTrapZoneProps prop of the Panel component used for the isSmall viewport of the Dropdown. Simply changing the prop from #${this._listId}1 to #${this._listId}0 should correct the issue and have the focus go to the first list option.

fluentui/packages/react/src/components/Dropdown/Dropdown.base.tsx

Line 602 in 9f8fe44

const focusTrapZoneProps: IFocusTrapZoneProps = { firstFocusableTarget: `#${this._listId}1` };

@TristanWatanabe TristanWatanabe added Good First Issue 🏆 and removed Needs: Attention Issue Pinged Needs: Investigation The Shield Dev should investigate this issue and propose a fix labels Jan 11, 2023
@TristanWatanabe TristanWatanabe moved this from Parking-Lot to Help Wanted (Lower Priority) in Fluent UI - Shield Priors Jan 11, 2023
GAUARVCHIT added a commit to GAUARVCHIT/fluentui that referenced this issue Apr 2, 2023
@GAUARVCHIT
microsoft#24280 issueFixed: focus is not set on first item
aacc94e 
Fixed the issue. Now focus should be on first item.
@GAUARVCHIT GAUARVCHIT mentioned this issue Apr 2, 2023
Open
GAUARVCHIT added a commit to GAUARVCHIT/fluentui that referenced this issue Apr 3, 2023
@GAUARVCHIT
microsoft#24280 issueFixed: focus is not set on first item
d7e71d1 
Fixed the issue. Now focus should be on first item.
@microsoft-github-policy-service microsoft-github-policy-service bot added the Resolution: Soft Close Soft closing inactive issues over a certain period label Sep 29, 2023
@microsoft-github-policy-service
Copy link

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

1 similar comment
@microsoft-github-policy-service
Copy link

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft-github-policy-service
Copy link

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.

1 similar comment
@microsoft-github-policy-service
Copy link

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: Dropdown Fluent UI react (v8) Issues about @fluentui/react (v8) Good First Issue 🏆 Resolution: Soft Close Soft closing inactive issues over a certain period Status: In PR Type: Bug 🐛
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

#24280 issueFixed: focus is not set on first item GAUARVCHIT/fluentui
7 participants
@Hotell @micahgodbolt @TristanWatanabe @nvazhayil @msft-fluent-ui-bot @gouttierre and others