jquery/jquery-ui

Greedy - disabled hoverclass bug

smarkyun opened this issue · 5 comments

smarkyun commented

Description

HoverClass is not being removed from a parent if there is a disabled droppable between the greedy droppable and the enabled parent. See the image:
image

Link to test case

mgol commented

Thanks for the report.

I moved the issue to a correct place, i.e. the jQuery UI bug tracker.

Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

Also, please attach a runnable test case.

smarkyun commented

The issue both exists in 1.11.2 and 1.13.3

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <h1 id="header"></h1>

    <div id="node_1" class="node">
      <span class="node-text">
        First Node
      </span>

      <div class="children">
        <div id="node_2" class="node">
          <span class="node-text">
            Second Node
          </span>
          
          <div class="children">
            <div id="node_3" class="node">
              <span class="node-text">
                Third Node
              </span>
            </div>

            <div id="node_4" class="node">
              <span class="node-text">
                Fourth Node
              </span>

              <div class="children">
                <div id="node_5" class="node">
                  <span class="node-text">
                    Fifth Node
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js" integrity="sha256-sw0iNNXmOJbQhYFuC9OF2kOlD5KQKe1y5lfBn4C9Sjg=" crossorigin="anonymous"></script>
    <script src="src/script.js"></script>
  </body>
</html>

JS:

$('.node').draggable({
  zIndex: 10,
  helper: 'clone',
});

$('.node').droppable({
  greedy: true,
  hoverClass: 'drop-target',
  disabled: true,
});

$('#node_1, #node_4').droppable('enable');

CSS:

body {
  background: white; /* Make it white if you need */
  color: white;
  padding: 0 24px;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.node {
  background-color: #101e2a;
  cursor: pointer;
  border: 1px solid gray;
  white-space: nowrap;
  padding: 5px;
  width: min-content;
  height: min-content;
  margin: 5px;
}

.children {
  padding-left: 10px !important;
}

.drop-target {
  border: 1px dashed gray !important;
  background: yellow !important;
}

.drop-target > .node-text {
    color: black;
}

Online sandbox:
https://playcode.io/1878332

mgol commented

Thanks for the info & the test case. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex and contain tests.

Also, could you describe in more detail what exactly to do in the sandbox to see the issue?

smarkyun commented
JavaScript.Playground.webm
mgol commented

Thanks, I think I understand now. Still, my note above stands.