Auto close Dropdown when user clicks outside #671
Conversation
There was a problem hiding this comment.
Hi @balsa-asanovic,
First of all, sorry for taking so much time to answer. The PR looks great, and it works as expected. I only have a suggestion: using a <div> instead of an <span>. What do you think?
| className="page-options" | ||
| isGrouped | ||
| /> | ||
| <span ref={dropdownRef}> |
There was a problem hiding this comment.
Suggestion: I prefer a <div> instead of <span>. After all, the Dropdown base element is already a <div> so it looks more consistent to me.
Additionally, the <div> element supports flow content while the <span> is limited to phrasing content.
There was a problem hiding this comment.
Yeah definitely, <div> is a better choice, sorry for missing this.
I've made the commit to PR addressing this.
There was a problem hiding this comment.
No problem, thanks a lot for addressing it 😃
There was a problem hiding this comment.
Now it looks even better 😃. We just released version 3 today, so your contribution will be part of the next release.
Just for the record, I fixed a minor problem in the changes file (not your fault, just a side effect of updating the file with the "Version 3" entry this morning).
I am approving and merging this fix. Once more time, thanks a lot!
Which is a kind of rollback of #671
Problem
As stated in #552 the Dropdown options menu of the page can currently be only closed by clicking the arrow again or by clicking any of the available options.
It would be nice for it to also close when the user clicks anywhere outside of the Dropdown.
This pull request introduces this functionality.
fixes #552
Solution
In the PageOptions component, I've added the useEffect hook which attaches event listener to the document on the component mount.
This event listener gets triggered on any click event through the whole document and if it is outside of the Dropdown it closes the options menu.
Testing
Added unit test which checks if the drop down is closed on outside click.
Screenshots
Dropdown opened
Dropdown closed on outside click
