Select hidden advances

[matiaslawwliet]

Hi, I've been having issues with preline since the beginning. The preline installation guide for Laravel doesn't seem to work properly. I've even seen other users having the same problem. I have Laravel 10, tailwindcss 4.1.0, preline 3.0.1, preline/select 3.0.1, and alpinejs 3.14.9.

How do I implement preline?
In my postcss.config.js file:

export default {
    plugins: {
        '@tailwindcss/postcss': {},
    },
};

and vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

In app.js file is as follows:

import './bootstrap';
import 'preline';

document.addEventListener('livewire:initialized', () => {
    window.HSStaticMethods.autoInit();
});

and app.css:

@import "tailwindcss";
@import "../../node_modules/preline/variants.css";
@source "../../node_modules/preline/dist/*.js";

@plugin "@tailwindcss/forms";

[x-cloak] {
    display: none;
}

/* Adds pointer cursor to buttons */
@layer base {
    button:not(:disabled),
    [role="button"]:not(:disabled) {
      cursor: pointer;
    }
}

Now that there's more context, my problem is as follows:** To correctly display an advanced select, I need to add "--prevent-on-load-init" to the hidden class. If I don't add this class, the select will never be displayed. I eventually initialize it with Alpinejs, but sometimes a duplicate is created. I need to figure out how I invoke the select to avoid duplication.

I appreciate any help.

I'm attaching this small snippet of my view:

            <div wire:key="select-uo-{{ now()->timestamp }}"
                            x-data="{
                                initSelect() {
                                    setTimeout(() => {
                                        const selectElem = document.getElementById('unidad_organizativa_id');
                                        if (selectElem && window.HSSelect) {
                                            new HSSelect(selectElem, {
                                                placeholder: 'Seleccione una unidad organizativa',
                                            });
                                        }
                                    }, 800);
                                }
                            }"
                            x-init="initSelect()">
                            <label for="unidad_organizativa_id" class="block text-sm text-blue-700 font-medium mb-2">Unidad organizativa</label>
                            <select data-hs-select ='{
                                "hasSearch": true,
                                "searchPlaceholder": "Buscar...",
                                "searchClasses": "block w-full sm:text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-1 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 py-1.5 sm:py-2 px-3",
                                "searchWrapperClasses": "bg-white p-2 -mx-1 sticky top-0 dark:bg-neutral-900",
                                "placeholder": "Seleccione el curso...",
                                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500",
                                "dropdownClasses": "mt-2 max-h-72 pb-1 px-1 space-y-0.5 z-20 w-full bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300",
                                "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100"
                            }' class="hidden --prevent-on-load-init" wire:model="cohorte.unidad_organizativa_id" id="unidad_organizativa_id">
                                <option selected="">Seleccione una unidad organizativa</option>
                                @foreach($unidadesOrganizativas as $unidad)
                                    <option value="{{ $unidad->id }}">{{ $unidad->nombre }}</option>
                                @endforeach
                            </select>
                            @error('cohorte.unidad_organizativa_id')<span class="text-red-500 text-xs">{{ $message }}</span>@enderror
                        </div>