Some features

[ionurboz]

If an "outside trigger" has been added to a trigger, a feature must be added to exclude it from its own children.

---

I explained it at length below. But let me describe it briefly, if we make a click, if it corresponds to an element inside the element, it will never activate its status, since it accepts it as a double click or trigger then external click.

with data-toggle-outside

<section>
    <div id="el-1" data-toggle-class="active" data-toggle-outside>
        CLICK ME   ------------------------------> Scenario 1
        <p>CLICK ME</p>   ---------------> Scenario 2
    </div>
    <span>OUTSIDE CLICK ME</span> --> Scenario 3
<section>

Scenario 1

#el-1 active.

Scenario 2

#el-1 as soon as it becomes active it becomes passive immediately.
Because considers to be an outside element it.

Scenario 1 + Scenario 2

#el-1 Active in first click, passive in second click
Nothing is wrong here, because when scenario 1 is repeated twice, the same thing will happen.

Scenario 1 + Scenario 3

#el-1 Active in first click, passive in second click
Nothing is wrong here, because <span> is an outside element.

with data-toggle-outside-parents

<section>
    <div id="el-1" data-toggle-class="active" data-toggle-outside-parents>
        CLICK ME   ------------------------------> Scenario 1
        <p>CLICK ME</p>   ---------------> Scenario 2
    </div>
    <span>OUTSIDE CLICK ME</span> --> Scenario 3
<section>

Scenario 1

#el-1 active.

Scenario 2

#el-1 active.

Scenario 1 + Scenario 2

#el-1 Active in first click, passive in second click.

Scenario 1 + Scenario 3

#el-1 Active in first click, passive in second click.

[ionurboz]

I achieved the result I wanted to say by adding 4 different points. I mark it below.

Thus, if we add the "data-toggle-childs" attribute to a trigger element containing "data-target-outside", the bottom elements of the trigger will not play an active role in both closing and opening. Especially the "mouseover" event caused great problems when you hover the mouse between the child and it parents. In this way, i have solved this.

In fact, I have found and corrected a shortcoming in coding on this occasion. You check the line going to "data-toggle-state" and block the "data-toggle-outside" feature. But in a "dropdown menu", users do not want the menu to close when they return cursor to the trigger. (All this I say to the ":hover" action)

This is exactly that part: if(event.relatedTarget && event.relatedTarget.closest("[" + TARGET_STATE + '="true"]'))return;

Places I've added

Specified as "// Added"

  var ARROWS = dataset("arrows"),
      CHECKED = "aria-checked",
...
...
      MODAL = dataset("modal"),
      OUTSIDE = dataset("outside"),
      // Added
      CHILDS = dataset("childs"), 

  var documentEventHandler = function documentEventHandler(event) {
...
...
      // Added
      if (element.hasAttribute(CHILDS) && element !== eTarget && element.contains(eTarget)) 
      {
        insideTarget = true;
      }

var init = (function () {
...
...
    triggerList.forEach(function (trigger) {
      trigger.addEventListener(trigger.getAttribute(EVENT) || "click", function (event) {
        event.preventDefault();
        // Added
        if(trigger.hasAttribute(CHILDS)) 
        {
          if( event.target !== trigger && event.relatedTarget === trigger || event.target === trigger && event.relatedTarget && trigger.contains(event.relatedTarget) )return;
        }
        // Added
        if(event.relatedTarget && event.relatedTarget.closest("[" + TARGET_STATE + '="true"]'))return;

<section>
    <div id="el-1" data-toggle-class="active" data-toggle-outside data-toggle-childs>
        CLICK ME   ------------------------------> Scenario 1
        <p>CLICK ME</p>   ---------------> Scenario 2
    </div>
    <span>OUTSIDE CLICK ME</span> --> Scenario 3
<section>

If there is a useful point, it is a great pleasure for me. Good luck with.

[Twikito]

Hi @ionurboz!
Thanks for taking time to add these comments. Let me check this.

[Twikito]

Well it seems it's more a dom structure issue than a missing feature.
In my opinion, if you really want to use this library, you probably shound rethink your structure.