Drop animation is broken #1991

BSarmady · 2021-10-08T09:56:00Z

jQuery: v3.6.0
jQuery UI: - v1.12.1 (with 3.6.0) - 2021-06-12
jQuery UI: - v1.13.0 (with 3.6.0) - 2021-06-12 (still broken)

Drop animation is broken, I'm not sure about other animations since I haven't tried.
Basically, after completing the animation hide-drop animation, the element is showing again. however this is happening in some specific case. This animation works correctly in jQuery UI - v1.11.4 - 2021-06-28

I tried using jQuery 3.6.0 but unfortunately lots of other UI elements, animation and components are broken too so I had to downgrade back to jQuery 1.11.3 to get website working again.

Issue
Clicking on menu1~3 will hide title and then show submenu1~3.
After mouse leave the menu, animation will trigger (a 1 second timer) and hide submenu1~3 and show title again.
This doesn't work on menu1 and 2 but works on menu3. after completing hide-drop animation, sub menu 1 and 2 show again over title which is also visible.

Additional Info
Now if you add

<div id="menu4" class="submenu hidden"></div>

after menu 3, menu 3 will show same symptoms too but not menu4. Same way if you remove submenu 3, sub menu 2 will work correctly (last menu item is the only one working as expected).

This works correctly on 1.11.4 but something else is broken in 1.11.4 and that was my reason to upgrade to 1.12.1

Following is the test code that I am using (attached as file too)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!--script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script-->
    <!--script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script-->
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var MenuTimer;
        $(function () {
            $('.button').button();
            $('.menu a').hover(
                function () {
                    clearTimeout(MenuTimer);
                },
                function () {
                    MenuTimer = setTimeout(function () {
                        $('.submenu').hide('drop', { direction: 'up' });
                        $('.title').show('drop', { direction: 'right' });
                        $('.menu a').blur();
                    }, 1000);
                }
            )

            $('.menu').on('click', 'a', function () {
                $('.submenu').hide();
                $('.title').hide('drop', { direction: 'right' });
                $('#' + $(this).attr('data-id')).show('drop', { direction: 'up' });
                if ($(this).attr('href') == '#')
                    return false;
            });
        });
    </script>
    <style type="text/css">
        .hidden { display: none; }
        .title { position: absolute; top: 0px; left: 0px;background-color:red }
        .submenu { position: absolute; top: 0px; left: 0px;background-color:green }
        .menu { flex-grow: 2; display: flex; flex-direction: column; }
        .header { height: 126px; }
    </style>
</head>
<body>
    <div class="header">
        <div class="m-1 menu">
            <div class="mainmenu">
                <a href="#" class="button" data-id="menu1">menu1</a>
                <a href="#" class="button" data-id="menu2">menu2</a>
                <a href="#" class="button" data-id="menu3">menu3</a>
            </div>
            <div style="flex-grow:2; position:relative;">
                <div class="title">TITLE TITLE TITLE TITLE TITLE</div>
                <div id="menu1" class="submenu hidden">
                    <a href="#" class="button">Sub Menu 1</a>
                </div>
                <div id="menu2" class="submenu hidden">
                    <a href="#" class="button">Sub Menu 2</a>
                </div>
                <div id="menu3" class="submenu hidden">
                    <a href="#" class="button">Sub Menu 3</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

1.html.txt

The text was updated successfully, but these errors were encountered:

mgol · 2021-10-08T16:35:33Z

Thanks for the report. Can you provide a test case on JS Bin? Thanks!

Just to make it clear: does the animation work correctly with jQuery 1.11.3 and is only broken with 3.6.0? In which browsers?

mgol · 2021-10-08T21:59:31Z

I think the issue is you're triggering a drop hide animation on all submenus when you hover out of any of the menu entries. If you trigger the animation only on the proper one, the animation works fine.

mgol · 2021-10-08T22:04:04Z

See an example without the bug (code to find the proper element is quite hacky, I didn't focus on that part): https://jsbin.com/deholic/1/edit?html,css,js,output

BSarmady · 2021-10-09T03:39:09Z

As for JSBin, I don't have an account there you can just copy the html from above and drop into html tab and it try it. I just did and works as I mentioned.
When Using jquery-3.6.0 and jquery-UI-1.11.4 it works (just like your sample) but with jquery-3.6.0 and jquery-UI-1.12.1 it is broken.
With jquery-3.6.0 and jquery-UI-1.11.4 other features are broken which are not related to this issue. For an 11 years old website (passed EOL), I didn't want to spend more time to fix it. so I just downgraded jquery to 1.11.3.
This menu animation is one of very few components that are still used in new implementation and appreciate if its behavior can be fixed.
Your solution looks good and works, I don't remember exact scenario that concluded to closing all sub menus. but I think it was something related to user moving mouse fast over menus on a slow machines which would leave more than one menu open. so to recover, I closed all menus instead of just last one.
I remembered that we have similar animation on a different situation when clicking 'close all' button will closes multiple div and shows another div instead.

I made even a smaller case (drop the whole thing in jsbin html tab and it will work)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!--script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script-->
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var MenuTimer;
        $(function () {
          setTimeout(function () {
            $('.submenu').hide('drop', { direction: 'up' });
            $('.title').show('drop', { direction: 'right' });
            $('.menu a').blur();
          }, 1000);
        });
    </script>
    <style type="text/css">
        .hidden { display: none; }
        .title { position: absolute; top: 0px; left: 0px;background-color:red }
        .submenu { position: absolute; top: 0px; left: 0px;background-color:green }
        .menu { flex-grow: 2; display: flex; flex-direction: column; }
        .header { height: 126px; }
    </style>
</head>
<body>
    <div class="header">
        <div class="m-1 menu">
            <div style="flex-grow:2; position:relative;">
                <div class="title hidden">TITLE TITLE TITLE TITLE TITLE</div>
                <div id="menu1" class="submenu">
                    <a href="#" class="button">Sub Menu 1</a>
                </div>
                <div id="menu2" class="submenu hidden">
                    <a href="#" class="button">Sub Menu 2</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Removing menu2 element will make animation work correctly on UI 1.12 too
Changing UI to 1.11 with menu2 in place will make animation work correctly too.

I'm guessing it has something to do with final step of animation which should apply to all elements (0~n) in array but only applies to elements 1~n.

mgol · 2021-10-10T16:40:13Z

From my investigation, the issue is the mode method used to set the effect mode sets it to "none" when mode is "hide" but the element is already hidden. If you try to hide all the submenus with the animation, mode is called multiple times during the hiding process and in cases other than the first it gets set to "none" as the element is already marked as hidden.

That's all I can do for now; given the maintenance status of jQuery UI and the fact this is not a regression in 1.13 but older, it's unlikely to get fixed unless someone from the community submits a PR.

BSarmady · 2021-10-11T03:30:43Z

I would gladly use UI 1.13 with 3.6.0 if it worked, but this issue exist in 1.13 too.

Looking at repo changes, mentioned method was added in commit (b6bec79) Effects: Rewrite

changes were made in a commit at 2012-12-26 (before release of 1.11) but merged in after 2 years and before release of 1.12.0

Unfortunately the mentioned commit is very extensive and removing second if in method doesn't seem to be a viable scenario as it looks like lots of other methods rely on the way this method works now.

mgol · 2021-10-11T12:47:49Z

I would gladly use UI 1.13 with 3.6.0 if it worked, but this issue exist in 1.13 too.

I understand that. But we're not focusing on bugs that were introduced before 1.13, there are too few people involved in the project. It's been many years since that release so people already had to adapt to this issue in their projects.

If you want it fixed, your best chance is to try to fix it yourself and submit a PR. Otherwise, it'll likely stay unfixed.

mgol added the Behavior shared with 1.12 label Oct 8, 2021

mgol added Behavior shared with 1.12 and removed Behavior shared with 1.12 labels Oct 8, 2021

mgol mentioned this issue Oct 8, 2021

drop animation is broken jquery/download.jqueryui.com#579

Closed

mgol added Bug Comp: Effects labels Oct 10, 2021

danbernier mentioned this issue Oct 19, 2021

1.13.0 bug in sortable, draggable: freezes page, "this.dragDirection" is undefined #1997

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Drop animation is broken #1991

Drop animation is broken #1991

BSarmady commented Oct 8, 2021 •

edited

Loading

mgol commented Oct 8, 2021

mgol commented Oct 8, 2021

mgol commented Oct 8, 2021

BSarmady commented Oct 9, 2021 •

edited

Loading

mgol commented Oct 10, 2021

BSarmady commented Oct 11, 2021

mgol commented Oct 11, 2021

Drop animation is broken #1991

Drop animation is broken #1991

Comments

BSarmady commented Oct 8, 2021 • edited Loading

mgol commented Oct 8, 2021

mgol commented Oct 8, 2021

mgol commented Oct 8, 2021

BSarmady commented Oct 9, 2021 • edited Loading

mgol commented Oct 10, 2021

BSarmady commented Oct 11, 2021

mgol commented Oct 11, 2021

BSarmady commented Oct 8, 2021 •

edited

Loading

BSarmady commented Oct 9, 2021 •

edited

Loading