Make a dropdown close once a button is clicked

#1

Background:
I use $:/core/ui/Buttons/more-tiddler-actions a lot in the ViewToolbar, because it frees up a lot of space without having to keep too many buttons in the viewtoolbar. But I found that the buttons contained in $:/core/ui/Buttons/more-tiddler-actions were too many and confusing. I therefore decided to create 2 buttons with a similar functionality. So as to have 4 or 5 buttons for each one and find what interests me at a glance.

The problem: Once i click on a button, the dropdown doesn’t close. It’s not a big inconvenience normally, but it makes the info button almost unusable because the dopdown covers the InfoPanel and the latter closes together with the dropdown if I click it close.

  • How can I make this dropdown close when a button is pressed?

Affected piece of code: (in a tiddler tagged with: $:/tags/ViewToolbar)

<$button popup=<<qualify "$:/state/popup/more">>  class=<<tv-config-toolbar-class>>>
{{$:/core/images/chevron-down}}
<$reveal state=<<qualify "$:/state/popup/more">> type="popup" position="left">

<div class="tc-drop-down">
<$transclude tiddler="$:/core/ui/Buttons/info">

Edit: I know there is a mode in $:/core/ui/ControlPanel/Settings/InfoPanelMode that prevents the closure of the InfoPanel unless its explicitly closed, it kinda solves the problem, but I really don’t like it, I’d like it anyways if the dropdown closed automatically.

#2

The problem is you forgot to close the <$button> widget with a matching </$button> before the <$reveal> widget.

Try this:

<$button popup=<<qualify "$:/state/popup/more">>  class=<<tv-config-toolbar-class>>>
{{$:/core/images/chevron-down}}
</$button>
<$reveal state=<<qualify "$:/state/popup/more">> type="popup" position="belowleft">
<div class="tc-drop-down">
<$transclude tiddler="$:/core/ui/Buttons/info">
</div>
</$reveal>
2 Likes
#3

Rookie mistake, now it works. Thank you!