Can't have two LWA in the same page.

[inmanturbo]

If they are stacked, do to z index or something, the options in the top input will go under the lower input and not be seen.

[joshhanley]

@inmanturbo hmm strange, it works fine for me.

Can you share a screenshot of the issue in your browser and also share your blade view (in code blocks) so I can have a look? Also which version you are using of Livewire and this package? Thanks!

[inmanturbo]

It's a Jetstream app without much customization. Pretty fresh, latish releases. Livewire ^v3. They are wrapped in input groups just like the ones Jetstream uses in its stock forms. I'll post screenshots and markup soon.

[inmanturbo]

@joshhanley here is the screenshot and markup

        <div class="col-span-6 sm:col-span-4">
            <x-label for="contact" value="{{ __('Contact') }}" />
            <div @contact-name-add-new.window="$wire.createContact($event.detail)">
                <x-lwa::autocomplete
                    name="contact-name"
                    wire:model-text="contactName"
                    wire:model-id="contactId"
                    wire:model-results="contacts"
                    :options="[
                        'text'=> 'display_name',
                        'allow-new'=> 'true',
                    ]" 
                />
            </div>
            <x-input-error for="contactName" class="mt-2" />
        </div>

        <div class="col-span-6 sm:col-span-4">
            <x-label for="company" value="{{ __('Company') }}" />
            <div @company-name-add-new.window="$wire.createCompany($event.detail)">
                <x-lwa::autocomplete
                    name="company-name"
                    wire:model-text="name"
                    wire:model-id="companyId"
                    wire:model-results="companies"
                    :options="[
                        'text'=> 'name',
                        'allow-new'=> 'true',
                    ]" 
                />
            </div>
            <x-input-error for="name" class="mt-2" />
        </div>

    "require": {
         ...
        "joshhanley/livewire-autocomplete": "^2.1",
        "laravel/framework": "^11.0",
        "laravel/sanctum": "^4.0",
        "laravel/tinker": "^2.9",
        "livewire/livewire": "^3.0",
         ...
    },

[joshhanley]

@inmanturbo thanks, I will test it out when I get the chance. I just realised that adding the autocomplete components to your tailwind.config.js isn't documented, so it's likely that Tailwind isn't including the z-index.

Try adding this to your tailwind.config.js and rebuild:

content: [
    ...
    './vendor/joshhanley/livewire-autocomplete/resources/views/*.blade.php',
],

[inmanturbo]

@joshhanley That might work! 🤯 If it does I'll be upset I didn't think of it. I already wish I'd thought of it :emoji

I'll try it soon.

[joshhanley]

@inmanturbo how'd you go, did that fix the issue?

[inmanturbo]

Yes it did!

The trouble with the two LWA on the same page made me rethink the complexity in that previous project and I decided to go with a different flow with a simpler create page followed by a separate show/edit page and I haven't gone back to it.

But I've since installed LWA in an older L10 project and as it happened needed two in the same modal for a simple two field form. I added the path to tailwind config and it worked like a charm. It is also a Jetstream project, with a very similar and fairly stock design.

Thank you!

[joshhanley]

@inmanturbo great! Thanks for confirming 🙂

[inmanturbo]

Notice there's not much support for dark mode either, but that's less a bug topic and more an ideas one. I do love the package. It's simple and lightweight. Even the most basic apps are helped along quite by its use. Not every project warrants a filament deep dive!

[joshhanley]

@inmanturbo yeah, I personally don't use dark mode, hence why I haven't added it. But I'm certainly not against it. Could you open that as a separate discussion for that?

Thanks! That's great to hear 😁

[inmanturbo]

I opened a dark mode discussion here: #38

[joshhanley]

@inmanturbo thanks!