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

[vitality82]

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]

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

[vitality82]

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]

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

[vitality82]

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]

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]

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]

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

[vitality82]

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]

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]

@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.