Skip to content

TreeView programmatic focus does not change tab indices #20141

@tonyhallett

Description

@tonyhallett
  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Call focus() on a tree item it does not affect the isTabbable of the newly focused tree item or any of the others.

Expected Behavior 🤔

The newly focused tree item has tabindex 0 and the previously focused has tabIndex -1

Steps to Reproduce 🕹

https://codesandbox.io/s/elastic-snow-ut9t7

Steps:

  1. Programmatically focus by pressing the 'Programmatic focus' button
  2. Shift Tab - tree item one has focus when it should be the button

https://github.com/mui-org/material-ui/blob/70c937d92dea4bd794164b4d75f75c1a84217363/packages/material-ui-lab/src/TreeItem/TreeItem.js#L331)

The tabbable variable prevents the expected behaviour.

const handleFocus = event => {
    if (!focused && tabbable) {
      focus(nodeId);
    }

    if (onFocus) {
      onFocus(event);
    }
  };

Is this some hacky way to circumvent React ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: tree viewChanges related to the tree view. This includes TreeView, TreeItem.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions