Double click to open, single click to outside blur

[jenstornell]

I've changed the dropdown example and added an event. In this case I double click to open the dropdown, so far so good. When I click outside nothing happends because I need to double click outside to make it hide again.

In my case I want to double click to open and single click to hide. Is that possible or do I need to roll out an own solution? Or a hook for it?

https://twikito.github.io/easy-toggle-state/#dropdown

<div class="example-dropdown">
	<button type="button"
		class="example-dropdown-button"
		data-toggle-class="is-open"
		data-toggle-target-next
                data-toggle-event="dblclick"
		data-toggle-outside
		data-toggle-escape>
		Select something here
	</button>
	<ul class="example-dropdown-list">
		<li>
			<button type="button">Lorem ipsum dolor</button>
		</li>
		<!-- Several options -->
	</ul>
</div>

Feature

A possible feature would be data-toggle-outside-event to specify a special event for outside clicks.

Hack it

For anyone else having this issue, it's possible to fix it by hacking the code like this:

Go here:

https://github.com/Twikito/easy-toggle-state/blob/master/dist/easy-toggle-state.es6.js#L188

Change it to:

if (target.hasAttribute(OUTSIDE) && target.isToggleActive) {
  document.addEventListener("click", documentEventHandler, false);
}

[Twikito]

Hi!
Thanks for taking time to report this issue.

I assumed the event would be always the same to toggle on and off, but I see with you case study that it not true. So yes, I think a new attribute data-toggle-outside-event would be great for you.

[Twikito]

Ok @jenstornell, I add a new data-toggle-outside-event attribute. Can you tell me if it works for you?

Doc here: https://twikito.github.io/easy-toggle-state/#advanced.

[jenstornell]

Tested it out quickly and it works just like expected. Well done!