JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<script src="http://cdn.ink.sapo.pt/2.1.0/js/ink.min.js"></script>
<script src="http://cdn.ink.sapo.pt/2.1.0/js/ink-ui.min.js"></script>
<script src="http://cdn.ink.sapo.pt/2.1.0/js/autoload.js"></script>
<link rel="stylesheet" href="http://cdn.ink.sapo.pt/2.1.0/css/ink-min.css">
<span>Click the between the red and the icon of an open child/grandchild to reproduce the bug</span>
<ul class="ink-tree-view">
  <li class="open"><span></span><a href="#">root</a>
    <ul>
      <li><a href="#">child 1</a></li>
      <li><span></span><a href="#">child 2</a>
        <ul>
          <li><a href="#">grandchild 2a</a></li>
          <li><span></span><a href="#">grandchild 2b</a>
            <ul>
              <li><a href="#">grandgrandchild 1bA</a></li>
              <li><a href="#">grandgrandchild 1bB</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">child 3</a></li>
    </ul>
  </li>
</ul>
<script>
    // There are two ways to run the code...
    // 1 - If you know you have the component and its dependencies already loaded, just do:
    var treeview = new Ink.UI.TreeView( '.ink-tree-view' );
 
    // 2 - If you're not sure the component or its dependencies are loaded at runtime, do:
    Ink.requireModules( ['Ink.UI.TreeView_1'], function(TreeView){
        new TreeView( '.ink-tree-view' );
    });
</script>

CSS

.ink-tree-view span {
    border: 1px solid red;
}