Using jquery ui autocomplete in Magento 2 admin – conflicts with menu.js on focus

I’m on Magento 2.4.5, so I don’t know if the 2.4.6 jquery updates will fix this. Will try that at some point.

On the frontend of Magento 2.4.5, jquery-ui.js is not directly loaded, Magento loads jquery.js and then you can require more jquery stuff as needed. In the backend, however, Magento 2 does load the full jquery-ui.js.

I’m using the same code (below) to implement jquery ui autocomplete on the frontend and the backend. The frontend works as expected, but the backend only partially works. Yeah, wierd right? By partially, I mean the autocomplete fires, and shows a dropdown of matched options, but when you try to focus on an item, it also triggers this focus event in mage/backend/menu.js, which ends up breaking the autocomplete. Furthermore, you cannot select an item from the dropdown.

Example code implementation (basic stuff):

        $( "#my_input" ).autocomplete({
            minLength: 1,
            maxResults: 10,
            source: function(request, response) {
                var results = $.ui.autocomplete.filter(sourceData, request.term);
                response(results.slice(0, this.options.maxResults));
            },
            focus: function( event, ui) {
               //here ui.item is not defined!
            },
            select: function( event, ui ) {
              //...
            },
            change: function( event, ui ) {
               //...
            }
        });

Anyone ever experienced this? I’m wondering if a mixin is needed to override mage/backend/menu.js, or you need to require the js in a certain way for the admin.