Classes attribute is not set on ui-select which means we can't style it

[nfauchelle]

Flux version

Latest

Livewire version

Latest

Tailwind version

4.0

Browser and Operating System

Chrome on macOS

What is the problem?

When trying to set CSS classes on the autocomplete wrapper field they're applied to the div inside.

Trying to set my auto complete field to grow inside a flex container, but the grow class isn't added where it should be. The class:input might also miss the mark.

Code snippets

<div class="w-[400px] p-4 bg-red-100">
    <div class="flex gap-2">
        <flux:autocomplete class="grow" class:input="w-full" placeholder="Search a thing">
            <flux:autocomplete.item>ABC</flux:autocomplete.item>
            <flux:autocomplete.item>XYZ</flux:autocomplete.item>
        </flux:autocomplete>
        <flux:dropdown>
            <flux:button icon:trailing="funnel"></flux:button>
            <flux:menu>
                <flux:menu.checkbox checked>Filter A</flux:menu.checkbox>
                <flux:menu.checkbox checked>Filter B</flux:menu.checkbox>
                <flux:menu.checkbox>Filter C</flux:menu.checkbox>
            </flux:menu>
        </flux:dropdown>
    </div>
</div>

How do you expect it to work?

Expect the search box to take up the space / grow. The class should be applied to the right element.

Side note, I would love to know why my funnel icon is solid and not outline. Heroicons has funnel as defaulting to outline.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[nfauchelle]

Editing vendor/livewire/flux-pro/stubs/resources/views/flux/autocomplete/index.blade.php

Updating the $attributes->only to handle class seems to do the trick, thou class and class:input should probably be checked and handled.

[joshhanley]

@nfauchelle thanks for reporting! Yeah that's strange that there are no attribute forwarding. Regarding the class:input stuff, that doesn't exist on the autocomplete component. It's like just a copy/paste error when we added the reference docs.