amsik / liquor-tree

Tree component based on Vue.js
MIT License
398 stars 94 forks source link

Cannot style selected element background during keyboard navigation #217

Open undergroundwires opened 4 years ago

undergroundwires commented 4 years ago

Hi @amsik πŸ‘‹, first of all thank you for this awesome library. I've been using it in my project as its primary gui component for almost a year with awesome feedback. It's very well thought library and could get everything I wanted so far.

Problem

I have a question to both to you and the community. When I use keyboard navigation I cannot style the background (that becomes white in my case). I've been debugging this for hours and I cannot find why it does not work 😒

What did not work

I can style all child nodes that get selected using this:

.tree-node.selected {
  background: red;
}

However the style does not apply the node that's selected at the moment.

What else did not work

I see that keyboard navigation "selects" the node and sets "focus" on its tree-anchor element TreeNode so I tried styling .tree-anchor:focus as well which did not work.

Reproduction

You can easily reproduce it by trying out the keyboard navigation and trying to set a background color to the node where the keyboard focus is.