React-devtools: Right and left arrows behave unexpectedly when tail tag is focused

[gaearon]

The right and left arrow keys behave unexpectedly when a tail tag of a node with children is selected.

Note that Firefox doesn't really let you select a tail tag. (Keyboard nav skips it. Mouse clicks redirect to the head tag.) So we'll compare to Chrome's behavior.

Left arrow

Chrome

Chrome jumps to the head tag.

DevTools

DevTools collapses the node. I don't feel strongly about this but it might be nice to match Chrome's behavior.

Right arrow

Chrome

Chrome does nothing in this case.

DevTools

DevTools steps into the tree (into children, moving the cursor up). This feels unnatural.

[jobala]

@gaearon,

I can pick this up, mainly because I have free time on my hands.
And willing to learn.

How do I get started.

[gaearon]

Hey, thanks for offering to help! The related logic is in frontend/keyboardNav.js. You can follow "Contributing" instructions in README to set up the enrichment.

[bvaughn]

Sweet! Feel free to ping me on Twitter if you hit a snag @jobala 😄

[jobala]

@bvaughn I will.

[jobala]

@bvaughn,

I git cloned, the repo to my local machine.

How do I set up my development environment(ie, includes connecting the
local react-devtools to chrome)? I will need to
see the effect of the changes I will be making.

Could be a dumb question, but yeah 😅

[jobala]

Otherwise,

I have done some digging and think this could be a possible solution.

I followed a rabbit hole from keyboardNav.js to dirToDest.js

for the right arrow (dirToDest.js line 39-50)

...
if (hasChildren) {
  if (bottom) {
     // This is the cause for our first bug, if we are at the bottom of a tree,
     // we return the last child of the tree. A solution would be to return...uhm...
     // not really sure what to return perhaps an empty string or just return null
     return 'lastChild'
  } else {
    return 'firstChild'
  }
}

for the left arrow (dirToDest.js line 32-37)

if (dir === 'left') {
  if (!collapsed && hasChildren) {
     // source of the bug, we are collapsing the tree, I am not sure what we should
     // return here, something equivalent to the opening tag
     return 'collapse'
  }
  return 'parent'
}

This analysis could be wrong, waiting for your suggestions and insight 😄

@gaearon @bvaughn

[bvaughn]

Hey @jobala,

The main README has a contributing section that mentions shells. For example, the easiest one to run is the plain shell. I made a walkthrough video recently that shows how to iterate on this shell.

You can also test in the browser using the Chrome shell or the Firefox shell.

[jobala]

@bvaughn

I have the right arrow bug fixed.

I have hit a snag with the left arrow, how do I get it to got to the opening tag ?

[bvaughn]

I think all you want to do is toggle isBottomTagSelected in the Store. So basically take the currently selected id (store.selected) and call either store.selectTop or store.selectBottom. (I think in your case you want store.selectTop.)