Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Greedy - disabled hoverclass bug #2253

Open
smarkyun opened this issue May 17, 2024 · 5 comments
Open

Greedy - disabled hoverclass bug #2253

smarkyun opened this issue May 17, 2024 · 5 comments
Labels
Behavior shared with 1.12 Comp: Droppable

Comments

@smarkyun
Copy link

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 mgol transferred this issue from jquery/jquery May 18, 2024
@mgol
Copy link
Member

mgol commented May 18, 2024

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
Copy link
Author

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
Copy link
Member

mgol commented May 21, 2024

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
Copy link
Author

JavaScript.Playground.webm

@mgol
Copy link
Member

mgol commented May 22, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Behavior shared with 1.12 Comp: Droppable
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mgol @smarkyun