Skip to content

Combobox with pre-selected value doesn't show all options on first open #2361

@zupolgec

Description

@zupolgec

Flux version

v2.11.1

Livewire version

v4.1.0

Tailwind version

v4.0.7

Browser and Operating System

Chrome on macOS

What is the problem?

When a combobox (variant="combobox") has a pre-selected value, clicking on it for the first time only shows the selected option instead of all available options. Clicking outside to close the dropdown, then clicking again shows all options correctly.

The issue is in flux.js: a MutationObserver in filterResultsByInput() triggers when options are first rendered and filters the list based on input.value. The filter is only cleared on the close event, but on first open the popover hasn't been closed yet, so the filter remains active with the pre-selected value.

Suggested fix: Add an open event listener alongside the existing close listener (around lines 4813 and 5408 in flux.js):

this.addEventListener("open", () => {
  if (this._filterable) {
    this._filterable.filter("");
  }
});

Code snippets to replicate the problem

<?php

use Livewire\Component;

new class extends Component {
    public string $industry = 'Photography';
}; ?>

<div>
    <flux:select wire:model="industry" variant="combobox" placeholder="Choose industry...">
        <flux:select.option>Photography</flux:select.option>
        <flux:select.option>Design services</flux:select.option>
        <flux:select.option>Web development</flux:select.option>
        <flux:select.option>Accounting</flux:select.option>
        <flux:select.option>Legal services</flux:select.option>
        <flux:select.option>Consulting</flux:select.option>
        <flux:select.option>Other</flux:select.option>
    </flux:select>
</div>

Steps to reproduce:

  1. Load the page (combobox shows "Photography" as pre-selected)
  2. Click on the combobox
  3. Only "Photography" is visible in the dropdown
  4. Click outside to close, then click again - now all options appear

Screenshots/ screen recordings of the problem

After first click:
Image

After click outside and click again:
Image

How do you expect it to work?

On first click, all options should be visible in the dropdown, with the selected option highlighted/checked. The filter should be cleared when the popover opens, not only when it closes.

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions