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.

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

[Bug]: Tree with virtualization focus on active tree item #31643

Closed
2 tasks done
ruthshemla opened this issue Jun 10, 2024 · 2 comments
Closed
2 tasks done

[Bug]: Tree with virtualization focus on active tree item #31643

ruthshemla opened this issue Jun 10, 2024 · 2 comments

Comments

@ruthshemla
Copy link

Library

React Components / v9 (@fluentui/react-components)

System Info

I would like to get the border around tree item on first click on tree item
currently I get the border only after keyboard navigation (up down left right)

Are you reporting Accessibility issue?

no

Reproduction

I would like to get the border around tree item on first click on tree item currently I get the border only after keyboard navigation (up down left right)

Bug Description

Actual Behavior

Calling focus on element does not make the border around tree item to show up

Expected Behavior

being able to get the border around tree item as "selection" indicator

Logs

No response

Requested priority

High

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.
@smhigley
Copy link
Contributor

@ruthshemla just to confirm, is this the outline you're referring to in this bug?:

screenshot of the Fluent Tree default example, with a black 2px outline around the first tree item

If so, that's the focus outline, and we intentionally only show it when the user is navigating via keyboard. It only indicates focus, not selection. Selection is indicated with checkboxes like these (or round ones in the case of single-select):

screenshot of the Fluent Tree selection example, no focus outline is showing but tree items have either empty square checkboxes showing an unchecked state, or checked checkboxes showing a checked state. One parent has a partially checked checkbox, showing a mixed state.

Could you clarify why you want an outline to show up on click? Or did you mean something other than the focus outline?

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants