Dropdown closes when opening parent ( in long list)

[motiko]

Describe the bug
In Firefox when the list is long. After scrolling down until more nodes are loaded (> 100) clicking on a parent node will close the dropdown.

To Reproduce
Use this demo.

1. Scroll down until more nodes are loaded.
   

2. Click on the + to open a parent
   

3. Dropdown is closed in Firefox 
   

Expected behavior
The dropdown should stay open after expanding a parent node in all browsers.

Environment (please complete the following information):

• Firefox 63.0.3 (maybe others but not happening in chrome)

Additional context
The parent node has to be after 100 nodes.

[mrchief]

This seems like the same issue as #148. I'm not sure why the workaround is not working in the latest version. Will have to dig deeper.

[motiko]

Wow thank you for your quick response let me know if i can help

[mrchief]

Well, we need to find a permanent fix for this. I'm thinking about alternative ways of detecting outside click or finding the root cause of firefox's behavior. Maybe it's a browser bug? Anything you can think of in finding the root cause or coming up with alternate solutions will be a great help.

[motiko]

What is your opinion on using react-click-outside? I have a PR ready in case you want to go this way?

[motiko]

I'm not sure why the workaround is not working in the latest version. Will have to dig deeper.

From what i see the lines added in #178

let easyPath = e.path || (e.composedPath && e.composedPath());
if (easyPath) return easyPath

are not in the updated develop.

[mrchief]

Thanks for looking into it! I'm generally averse to increasing bundle size by adding another dependency, especially since react-outside-click employs the same node.contains method to check if the click should close the dropdown.

The easyPath check was added but then removed since we found that the code worked without it just fine. I'm sure the discussion is somewhere in old issues/PRs.

I'm curious to see why Firefox behaves differently than the spec. We can always add the fallback or employ another technique if we are running short on time.

[mrchief]

I was able to reproduce this in Edge too - so it seems Chrome is probably the quirky one. I'm going to dig a bit deeper on this.

[motiko]

Somewhat related:
Working with click event has some accessibility issues (see this SO answer).
Consider using focusout instead.
I can open a feature suggestion issue if you prefer.

[mrchief]

I've seen that answer before and I was under the impression that React will normalize all that with it's click handler. focusout seems like an interesting idea. If you want to send a feature/PR for that, that'll be great!

[mrchief]

🎉 This issue has been resolved in version 1.18.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[mrchief]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀