Angular-tree-component: Tab is not hitting tree component

[debslab]

I have tree component in my page. When I press tab, I don't see it's hitting tree component. I have to use mouse to select one of the node, and then only I can do keyboard navigation which seems to be usability issue to me. Please let me know if I am missing something.

[debslab]

May I get some update here please, at least a pointer to how I can achieve it by either modifying this component or from outside.

[adamkleingit]

Hi,
I can't reproduce, in the example it works for me.
Can you share your code?

[debslab]

Please check following plunkr. https://plnkr.co/edit/Zm98g3kT6yU7XWcUwTvX?p=preview.

If you hit tab, button will be highlighted and tree component is never touched

[adamkleingit]

Hi,
I hope to have time to look at it during the weekend

--

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• ([phone]

On Fri, Mar 10, 2017 at 8:49 AM, debslab [e-mail] wrote:

Please check following plunkr. https://plnkr.co/edit/
Zm98g3kT6yU7XWcUwTvX?p=preview.

If you hit tab, button will be highlighted and tree component is never
touched

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular-tree-component/issues/199#issuecomment-285592036,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSseEEK_cCqB9MQD0hEp0njRuP8xsks5rkPJtgaJpZM4MN7Fr
.

[AngularTx]

Any updates here?? I too have the same issue .

[AngularTx]

Any updates here ?

[AngularTx]

hi ,

any update here? even after setting the focus on the first node , key navigation doesn't work. we need to click the node and then the traversing happens.

And also the tab doesn't on tree .

[adamkleingit]

Hey @AngularTx,
Did you try to debug it?

[AngularTx]

nope. during testing I found that .

Did you get time to take a look at the issue ?

On Jul 11, 2017 8:14 AM, "adam klein" [e-mail] wrote:

Hey @AngularTx https://github.com/angulartx,
Did you try to debug it?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular-tree-component/issues/199#issuecomment-314340978,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AStMS3sfR0Uy0J0I62ueusl6Bu-x9T-iks5sMxK2gaJpZM4MN7Fr
.

[adamkleingit]

Got a big issue backlog. It will be very helpful if you try to debug it -
thanks!

--

• Adam Klein http://il.linkedin.com/in/adamklein500
• CTO @ 500Tech.com http://500tech.com/
• AngularJS, ReactJS, NodeJS
• Development, consulting, training and public speaking
• ([phone]

On Wed, Jul 12, 2017 at 8:23 PM, AngularTx [e-mail] wrote:

nope. during testing I found that .

Did you get time to take a look at the issue ?

On Jul 11, 2017 8:14 AM, "adam klein" [e-mail] wrote:

Hey @AngularTx https://github.com/angulartx,
Did you try to debug it?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
199#issuecomment-314340978>,
or mute the thread
AStMS3sfR0Uy0J0I62ueusl6Bu-x9T-iks5sMxK2gaJpZM4MN7Fr>

.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/500tech/angular-tree-component/issues/199#issuecomment-314838570,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2SSjYIboMGRp1mUeXrlYtoiu_zu2bHks5sNQD0gaJpZM4MN7Fr
.

[Suncrusher]

I did have the same problem. My solution looks like this:

I add an eventlistener to the "enter" key. Only then the user can use left and right arrow to navigate. When "enter" is pressed I mark the node I want with this function:

  markNode(idOfNode) {
    this.tree.setFocus(true);
    const node = this.tree.getNodeById(idOfNode);
    this.tree.setActiveNode(node, true, false);
    const activeNode = this.tree.getActiveNode();
    let myElement = document.querySelector('#l-' + activeNode.data.id) as HTMLElement;
    this.renderer.invokeElementMethod(myElement, 'focus');
  }

The key to this is the
this.tree.setActiveNode(node, true, false);

Then the arrow keys work. In my template I do have a invisible checkbox and a label. I do want the label to receive the focus.

Hope this helps.

[sadiksha]

@Suncrusher: can you please create a stackblitz so that I can have a look at it? I don't think the first issue is still solved. I also tried to set the [focused]="true" on tree node however, the tab still does not hit the tree as mentioned in the original question.