onActive on mouseover doesn't work with vue renderer

[jenky]

Description

onActive doesn't fire with the Vue renderer, and items do not get highlighted on hover because aria-selected is always false.

Reproduction

Follow the document at https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/using-vue/ and replace the renderer option

renderer: { createElement: h, Fragment, render }

Then, search and hover your mouse cursor over any items.

Reproduce link: https://stackblitz.com/edit/vitejs-vite-bbjrfwxy?file=src%2FApp.vue

Note

• Upon removing the renderer option, everything works as expected.
• Keyboard navigation still works as the item still get highlighted and onActive also get called.

Expected behavior

• onActive should be called.
• aria-selected state should updated accordingly.

Environment

• OS: macOS 15.1.1 (24B91)
• Browser: Chrome Version 131.0.6778.265
• Autocomplete version: 1.17.9

[dhayab]

Hi, you'll need to normalize event names for them to work with Vue's h renderer. You can find how we handle this in our Vue renderer example: https://github.com/algolia/autocomplete/blob/next/examples/vue/src/utils/createElement.js.

[jenky]

Thank you but I'm not using custom event, perhaps I didn't explain clearly. The onActive even that I referred to is an option when defining a source
https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-onactive

If you open the reproduction link, you can see the different behavior when you hover your mouse over the result link by commenting/uncommenting the renderer option in line 10.

With the Vue renderer, the result item doesn't get highlighted using mouse cursor, so I decided to debug it locally, but there were no logs.

{
          sourceId: 'links',
          getItems() {
            return [
              { label: 'Twitter', url: 'https://twitter.com' },
              { label: 'GitHub', url: 'https://github.com' },
              { label: 'LinkedIn', url: 'https://linkedin.com' },
            ];
          },
          templates: {
            getItemUrl: ({ item }) => item.url,
            item: ({ item }) => item.label,
          },
          onActive: () => console.log('onActive'),
        },

[dhayab]

No worries I should have been clearer myself. It is not related to custom events. You still need to normalize event names passed to Vue's h renderer as I mentioned earlier.

Internally, Autocomplete relies on JSX components, which for instance states that mouse events are handled by onMouseMove, but Vue's renderer expects onMousemove as its event handler. The method linked in my previous comment addresses this case.

The onActive method provided by Autocomplete is itself triggered as a consequence of properly handling mouse events.

[jenky]

https://github.com/algolia/autocomplete/blob/next/examples/vue/src/utils/createElement.js

Oh, my bad! I assumed this file was already part of the core bundle, didn't realize it was from the examples. I have it working now.

Really appreciate your help. Have a nice day!