fix(cdk/tree): update active item on focus

[zarend]

fix(cdk/tree): update active item on focus

Update CdkTreeNode, TreeKeyManager and Tree "Load More" example
regarding progrmatic focus.

• In CdkTreeNode, update the active item on the focus event.
• expose TreeKeyManager.updateActiveItem
• remove TreeKeyManager.onClick
• In "Load More" example, when clicking "Load More", focus first node
  that is added.

[zarend]

Hi @BobobUnicorn ,

This is what I came up with for supporting programmatic focus.

The first approach I tried was finding a way to use CdkTreeNodeComponent.focus. That was difficult because I couldn’t find a way to get a reference to the CdkTreeNodeComponent of the “Load More” node. It seemed unnecessary for me to maintain a QueryList of tree node component when the tree already had one.

I ended up finding it easier to use DOM manipulation to find the dom node I wanted and call .focus on it.

I also remove the onClick method on TreeKeyManager so I wouldn’t have to add a duplicate method for onFocus. I exposed updateActiveItem to align with FocusKeyManager.

I also make a few changes to “Load More” example so we can test when there are two “Load More” nodes and I took care of misc small details in the demo.

WDYT?

-Zach

[BobobUnicorn]

the one thing I'm concerned about here is whether or not the tabindex updates correctly.

[zarend]

I added a unit test to confirm that the tabindex updates.

[zarend]

nvm, that's something else. Let me double check that manually right now

[zarend]

I tested the Load More example, it it correctly updates tabindex when clicking "Load More". It focuses the first new item that appears and sets it's tabindex to 0. All other tree nodes have tabindex="-1".

There's also a unit test to verify that CdkTreeNode correctly responds to focus event. Calling .focus() will trigger native focus event.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}