Duplicate place holder in listbox select

[zoonix]

When you create a select as a listbox, the place holder will stack multiple times when you hit the back button.

<flux:select wire:model.live="selectedVehicleYearHigh" size="sm" variant="listbox" clearable placeholder="Year High...">
    @foreach($vehicleYears as $year)
        <flux:option>
            {{ $year }}
        </flux:option>
    @endforeach
</flux:select>

Works fine as new page load, refresh or wire:navigate, but if you go back it will duplicate the place holder...

Also works fine as a combobox or default and clearable doesn't seem to matter. Just when listbox is set.

Using flux, flux-pro 1.0.28

[Jaiieq]

Can confirm, I have had this happen to me as well. I used the following hack to trigger a page reload to remove the duplications. Not ideal, but a [current] workaround in my case

@script
<script>
window.onpopstate = function () {
    window.location.reload(true)
};
</script>
@endscript

[jeffchown]

@zoonix Can you provide a full code example that can be copy/pasted to reproduce the issue? (Volt components are great for this)

[zoonix]

Just add the listbox variant to any flux:select, click any link to another page on the app and then click the back button.

<?php

use Livewire\Volt\Component;

new class extends Component {
} ?>

<div>
    <flux:select variant="listbox" placeholder="Test...">
        <flux:option value="10">10</flux:option>
        <flux:option value="25">25</flux:option>
        <flux:option value="50">50</flux:option>
        <flux:option value="100">100</flux:option>
    </flux:select>
</div>

And you will get a duplicate placeholder

[jeffchown]

@zoonix Using your code and a link to another page in my test app, then the back button, after multiple attempts, I'm unable to reproduce the issue.

Have you php artisan view:clear after composer update and npm run build?

[jeffchown]

@zoonix This may be related to this previous issue: #697

[zoonix]

I started fresh install...

laravel new --api --breeze --database=sqlite --dark --git --organization=whatever --pest --stack=livewire sandbox.flux

Install flux
composer require livewire/flux

Added @fluxStyles and @fluxScripts to the head and body of the app.blade.php file

Duplicated the dashboard route and component to create a new route and component called "sandbox", and added it to the navigation.

Added the following to the sandbox.blade.php file:

  <flux:select variant="listbox" placeholder="Test...">
      <flux:option value="10">10</flux:option>
      <flux:option value="25">25</flux:option>
      <flux:option value="50">50</flux:option>
      <flux:option value="100">100</flux:option>
  </flux:select>

The "Test" placeholder will duplicate when you click the Dashboard link and then click back.

Reference repo...
https://github.com/zoonix/sanbox.flux

[zoonix]

Ah, it only seems to happen when wire:navigate is used on the nav links. Change them to standard links and the issue stops.

[jeffchown]

@zoonix That confirms it is related to previous issue #697

[Jaiieq]

Just confirmed with my own project. Using wire:navigate causes the duplicate entries, whereas when I removed it the problem went away.

[joshhanley]

@zoonix and @Jaiieq can you confirm exactly what patch version of Flux you are using? Run composer show livewire/flux to get the details. This got fixed in Flux v1.0.24 so just want to confirm if the issue is still on-going or whether you are using an old version of Flux.

Edit: Sorry just saw @zoonix that you actually had v1.0.28 in your description 😅

[joshhanley]

I can confirm this behaviour. To replicate, add this Volt component below to resources/views/livewire/playground.blade.php and add this route Volt::route('/playground', 'playground');.

Then click on the "Playground" link, then hit the back button.

<?php

use Livewire\Volt\Component;

new class extends Component {
    //
}
?>

<div>
    <flux:link href="/playground" wire:navigate>Playground</flux:link>

    <flux:select variant="listbox" placeholder="Test...">
        <flux:option value="10">10</flux:option>
        <flux:option value="25">25</flux:option>
        <flux:option value="50">50</flux:option>
        <flux:option value="100">100</flux:option>
    </flux:select>
</div>

[tjgore]

Opened a PR with a potential fix to remove any placeholders before we set another placeholder during navigation. It's very similar to the previous fix for #697

[RezaODB]

Update on this? I'm having the same issue with this code:

<flux:select wire:change="setGroup({{ $user->id }}, $event.target.value)" variant="listbox" searchable size="sm" :placeholder="__('Select store...')"> @foreach ($groups as $group) <flux:option :value="$group->id" wire:key="{{ $group->id }}" :selected="$user->group_id === $group->id">{{ $group->name }}</flux:option> @endforeach </flux:select>

[joshhanley]

@RezaODB yep I've opened an alternative PR to TJs and hopefully Caleb should review it in time for the next release.