Flux select using max-w-fit breaks when searchable property is set

[lucasRolff]

Flux version

v1.1.4

Livewire version

v3.5.19

What is the problem?

If using flux:select variant listbox with a class of max-w-fit with content such as calling_code for countries (+1, +44, +31 etc) and at the same time adds searchable to it, the width of the dropdown breaks.

If removing searchable it will be wide enough to show all content.

Code snippets

composer package: composer require rinvex/countries.
The composer package will expose countries() directly within blade templates. So it's quite straight forward luckily!

Broken Blade view:

<flux:field>
    <flux:label badge="optional">Phone</flux:label>
    <flux:input.group>
        <flux:select variant="listbox" class="max-w-fit" searchable placeholder="+31">
            @foreach (countries() as $country)
                @if ($country['calling_code'] != '')
                    <flux:option value="{{ $country['calling_code'] }}">+{{ $country['calling_code'] }}</flux:option>
                @endif
            @endforeach
        </flux:select>
        <flux:input wire:model.live="phone" required />
    </flux:input.group>
</flux:field>

Result:

Working Blade view:

<flux:field>
    <flux:label badge="optional">Phone</flux:label>
    <flux:input.group>
        <flux:select variant="listbox" class="max-w-fit" placeholder="+31">
            @foreach (countries() as $country)
                @if ($country['calling_code'] != '')
                    <flux:option value="{{ $country['calling_code'] }}">+{{ $country['calling_code'] }}</flux:option>
                @endif
            @endforeach
        </flux:select>
        <flux:input wire:model.live="phone" required />
    </flux:input.group>
</flux:field>

Result:

How do you expect it to work?

I'd expect the searchable to keep the width of the dropdown same width as without the searchable property.

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.

[joshhanley]

@lucasRolff thanks for reporting! In future please make sure to "include any Blade variable definitions" as per our instructions on the issue form, otherwise your issue might be closed, as this code snippet didn't work without the countries() method.

I had a quick look at this and the issue is that there is an extra wrapping div when searchable is used, and it doesn't have a min width on it like it does when it's just the plain options without the searchable input.

As a work around, you can just add [&>[data-flux-options]]:min-w-48 to your select classes and it should fix the issue. See below

<flux:field>
    <flux:label badge="optional">Phone</flux:label>
    <flux:input.group>
        <flux:select variant="listbox" class="max-w-fit [&>[data-flux-options]]:min-w-48" searchable placeholder="+31">
            @foreach (countries() as $country)
                @if ($country['calling_code'] != '')
                    <flux:option value="{{ $country['calling_code'] }}">+{{ $country['calling_code'] }}</flux:option>
                @endif
            @endforeach
        </flux:select>
        <flux:input wire:model.live="phone" required />
    </flux:input.group>
</flux:field>

[lucasRolff]

@lucasRolff thanks for reporting! In future please make sure to "include any Blade variable definitions" as per our instructions on the issue form, otherwise your issue might be closed, as this code snippet didn't work without the countries() method.

I don't have a countries() method in my livewire component though.

My whole livewire component is the default:

<?php

namespace App\Livewire\Billing;

use Livewire\Component;

class ShowBilling extends Component
{
    public function render()
    {
        return view('livewire.billing.show-billing');
    }
}

rinvex package defines countries() without a namespace, so will be accessible globally, at least in the few Laravel and Livewire projects I use it :) So didn't know any better.

I'll use the workaround in the meantime!

Thank you Josh!

[joshhanley]

@lucasRolff no worries! In the future just replace functions like that with an array in your component or something, that way the code works for us as soon as we copy it, so we can spend more time investigating the issue instead of trying to get it run 😁

Let me know how you go with the work around.

[lucasRolff]

@lucasRolff no worries! In the future just replace functions like that with an array in your component or something, that way the code works for us as soon as we copy it, so we can spend more time investigating the issue instead of trying to get it run 😁

Let me know how you go with the work around.

The workaround works flawlessly, so thank you fine sir!

[joshhanley]

@lucasRolff awesome! 😁