Mousemove on Autocomplete widget generates tons of cloned elements in hidden accessible #2002

vitality82 · 2021-10-28T13:53:56Z

I thought I had a bug in my project after upgrading to jQuery 3.6.0 and jQuery UI - v1.13.0 but this is reproducible with downloading the full jQuery UI as of today:

Not just hovering, but any mouse move on any of the items in the autocomplete result list clones every item inside .ui-helper-hidden-accessible DOM element. Keep going and the debug console scrollbar starts to become very small.

Is this the intention? I have some performance concerns here over cloning so many elements in a hidden DOM, therefore polluting the DOM significantly.

vitality82 · 2021-10-28T14:56:33Z

HINT: I found it to be this line that's adding all those hidden DOM elements:

vitality82 · 2021-10-28T14:58:39Z

environment:

MacBook Pro (16-inch, 2019)
Chrome Version 94.0.4606.81 (Official Build) (x86_64)

This (liveRegion announcement) happens on any move of your mouse cursor in the resulting list - so you don't have to hover to another item.

I would expect that dom insertion does not happen all the time when hovering the same item, at the least?

mgol · 2021-11-07T10:56:16Z

@vitality82 Thanks for the report. Do you see the same behavior with jQuery UI 1.12.1 or not?

vitality82 · 2021-11-08T18:48:55Z

No, I don't see dupes in the hidden accessible element, just one per each of the result items. Maybe they are triggered on a less sensitive event or perhaps additionally removed (this would be redundant), in any case I tested with: jQuery v1.12.4 on a live production app, and the class ui-state-focus is applied on hover of the list items in the original ui-autocomplete unordered list. I don't think this class is applied anymore.

Hope this will help move the ball forward.

mgol · 2021-11-08T23:07:14Z

jQuery v1.12.4

The jQuery version shouldn't matter that much; I was asking whether the same issue appears when jQuery UI 1.12.1 is used.

vitality82 · 2021-11-10T21:33:10Z

Sorry about the confusion. Prior to the upgrade I was using jQuery UI - v1.11.4 - 2015-05-14 and the same issue didn't show on that version.

mgol · 2021-11-11T07:31:50Z

Thanks. Can you check if the issue is still there if you switch to jQuery UI 1.12.1?

vitality82 · 2021-11-11T13:19:22Z

You can reproduce it just by downloading jQuery-UI both v1.11.4 and v1.12.1 - there is the source of truth - and it looks like the issue also exists in v1.11.4 only a little bit different:

v1.11.4: one item inserted per hover (every time)
v.1.12.1: one item inserted per mouse move (often it inserts a lot more then on item due to the mouse move)

mgol · 2021-11-11T16:51:39Z

Thanks for the updated info. 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, though.

jga8 · 2021-11-11T21:26:16Z

@mgol and @vitality82, we have the same issue. This issue is not present in jQuery UI 1.12.1, but is present in jQuery UI 1.13.0. (jQuery 3.6.0/macOS/Chrome) and is preventing us from going to 1.13.0. We can easily reproduce this issue.

mgol · 2021-11-11T21:42:14Z

@jga8 Thanks for the info. It'd be good to understand why you get different results than @vitality82 who said the issue is in 1.12.1 as well, just not in 1.11.4 (at least not to this extent).

jga8 · 2021-11-11T22:21:59Z

@mgol to reproduce this, this is what we did: when we copy the code from the demo page, we see the issue. And simply replacing the line
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
with
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
makes the issue go away.

Is there any other information we can provide to help?

Screenshot 1 of 2: With 1.12.1, which does not have the error (no duplicates on mousemove )

Screenshot 2 of 2: With 1.13.0 with the duplicates on mousemove.

The following is the code we used

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>
 <div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 </body>
</html>

vitality82 · 2021-11-12T06:27:21Z

@jga8 Thanks for the info. It'd be good to understand why you get different results than @vitality82 who said the issue is in 1.12.1 as well, just not in 1.11.4 (at least not to this extent).

I can see the major issue in 1.13.0 and 1.12.1. The way I've tested is to download jQuery UI for both versions and tested on latest Chrome and Firefox.

On 1.11.1 the DOM appending also has dupes but only when you hover a full item in the result list.

mgol · 2021-12-01T21:49:52Z

OK, it looks like at least one of the issues is specific to 1.13. Thanks for all the info, I'll have a look if no one beats me to it.

bbenjamin · 2021-12-08T14:05:27Z

This looks to be related to a change in menu.js that was introduced in 1.13

jquery-ui/ui/widgets/menu.js

Line 117 in 6d072c5

"mousemove .ui-menu-item": "_activateItem",

Adds this to the event listeners:
"mousemove .ui-menu-item": "_activateItem",

The _activateItem callback triggers a focus event that results in the autocomplete widget adding the item to the aria-live region. _activeItem will return early when the target has the active state class: if ( target.is( ".ui-state-active" ) ) { return; }, but the target does not (yet?) contain that class.

vitality82 · 2022-01-05T11:18:02Z

Awesome work! Just curious will there be a minor release with this included patch?

mgol · 2022-01-05T11:42:40Z

Yes, we'll release it in 1.13.1 when it's ready. For now we still plan to land one more patch before this release.

mgol · 2022-01-20T23:36:40Z

jQuery UI 1.13.1 including a fix for this issue has been released: https://blog.jqueryui.com/2022/01/jquery-ui-1-13-1-released/.

fnagel added Bug Comp: Autocomplete labels Oct 28, 2021

mgol added the Needs info label Nov 7, 2021

mgol added Behavior shared with 1.12 and removed Needs info labels Nov 11, 2021

mgol removed the Behavior shared with 1.12 label Nov 18, 2021

mgol added the Behavior different from 1.12 label Dec 1, 2021

mgol added this to the 1.13.1 milestone Dec 1, 2021

bbenjamin mentioned this issue Dec 8, 2021

Autocomplete: Rewrite with a delay instead of appending the live region #2031

Merged

theodoreb mentioned this issue Dec 23, 2021

Autocomplete: fix issue #2002 by rewriting live region after delay #2036

Closed

mgol closed this as completed in 933ce5d Jan 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mousemove on Autocomplete widget generates tons of cloned elements in hidden accessible #2002

Mousemove on Autocomplete widget generates tons of cloned elements in hidden accessible #2002

vitality82 commented Oct 28, 2021

vitality82 commented Oct 28, 2021

vitality82 commented Oct 28, 2021 •

edited

Loading

mgol commented Nov 7, 2021

vitality82 commented Nov 8, 2021

mgol commented Nov 8, 2021

vitality82 commented Nov 10, 2021

mgol commented Nov 11, 2021

vitality82 commented Nov 11, 2021

mgol commented Nov 11, 2021

jga8 commented Nov 11, 2021 •

edited

Loading

mgol commented Nov 11, 2021

jga8 commented Nov 11, 2021

vitality82 commented Nov 12, 2021

mgol commented Dec 1, 2021

bbenjamin commented Dec 8, 2021

vitality82 commented Jan 5, 2022

mgol commented Jan 5, 2022

mgol commented Jan 20, 2022

Mousemove on Autocomplete widget generates tons of cloned elements in hidden accessible #2002

Mousemove on Autocomplete widget generates tons of cloned elements in hidden accessible #2002

Comments

vitality82 commented Oct 28, 2021

vitality82 commented Oct 28, 2021

vitality82 commented Oct 28, 2021 • edited Loading

mgol commented Nov 7, 2021

vitality82 commented Nov 8, 2021

mgol commented Nov 8, 2021

vitality82 commented Nov 10, 2021

mgol commented Nov 11, 2021

vitality82 commented Nov 11, 2021

mgol commented Nov 11, 2021

jga8 commented Nov 11, 2021 • edited Loading

mgol commented Nov 11, 2021

jga8 commented Nov 11, 2021

vitality82 commented Nov 12, 2021

mgol commented Dec 1, 2021

bbenjamin commented Dec 8, 2021

vitality82 commented Jan 5, 2022

mgol commented Jan 5, 2022

mgol commented Jan 20, 2022

vitality82 commented Oct 28, 2021 •

edited

Loading

jga8 commented Nov 11, 2021 •

edited

Loading