Conflict using Splide JS with Preline Tabs

[shamssujon]

I am getting the console error "Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')" when trying to use the Splide JS in a project where Preline is installed.

I believe this is because of a conflict with the Tabs plugin. It requires role="tablist", role="tab", role="tabpanel" and it is conflicting with the Splide JS. I looked into the Preline codes and found this:

document.querySelectorAll('[role="tablist"]:not(select):not(.--prevent-on-load-init)').forEach()

which is not a good way to target the tabs in my opinion. Because there might be other elements using the same role attribute.

Any suggestion on how to fix this?

[zhi8617]

Same problem, when I introduce.

[umaraziz0]

Same issue here, in my case it's conflicting with shadcn-vue's Tabs, which is based on radix-ui tabs

[umaraziz0]

Update:

I've found a temporary fix is to use autoInit() only on components that you use, and since I only use the Advanced Select, my configuration on nuxt.js would be:

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:finish', () => {
    window.HSStaticMethods.autoInit(['select']);
  });
});

[jahaganiev]

We will revisit role="tablist" init approach in v3.0 Preline.

Meanwhile, you may add --prevent-on-load-init class where tablist is used for this specific case.

Cheers!