Livewire Combobox Laravel Package

Getting Started

• Install with Composer alongside a Laravel app using Livewire 3:

  composer require sertxudeveloper/livewire-combobox
  

• Confirm the installed version and Livewire compatibility:

  composer show sertxudeveloper/livewire-combobox
  

• Look first at:
  1. The package README for the exact component tag, props, and option shape.
  2. The published config file, if the package ships one.
  3. The published Blade view, since that is where most day-to-day customization happens.
  4. src/ for the Livewire component class and any public methods/properties exposed to your app.
• Publish any package assets/views/config you intend to customize. List available tags first:

  php artisan vendor:publish
  

  Then publish the package’s views/config using the tags shown, for example:

  php artisan vendor:publish --tag=livewire-combobox-views
  php artisan vendor:publish --tag=livewire-combobox-config
  

• First use case: a searchable select bound to a Livewire property. Keep the options payload small and simple:

  public function getUsersProperty(): array
  {
      return User::query()
          ->orderBy('name')
          ->limit(50)
          ->get()
          ->map(fn (User $user) => [
              'value' => $user->id,
              'label' => $user->name,
          ])
          ->all();
  }
  

  <livewire:combobox
      wire:model="userId"
      :options="$this->users"
  />
  

  Use the component/prop names documented by the package if they differ.

Implementation Patterns

• Basic form select: bind with wire:model and validate the selected value like any other Livewire property:

  protected $rules = [
      'userId' => ['required', 'exists:users,id'],
  ];
  

• Dependent comboboxes: reset downstream values when the parent changes:

  public function updatedCountryId(): void
  {
      $this->cityId = null;
  }
  

  Re-render the child combobox with a stable wire:key when its option set changes.
• Server-side search: for large datasets, do not pass every model to the component. Keep the search term in your Livewire component, query a limited result set, and pass a small value/label array to the combobox. Use wire:model.live.debounce.300ms where immediate updates are needed.
• Custom option rendering: publish the Blade view and customize the option markup there. Preserve the component’s existing accessibility attributes, keyboard handlers, and wire:key usage.
• Custom labels: map your Eloquent models to the package’s expected option shape in a computed property or dedicated method, rather than exposing models directly.
• Testing: use Livewire’s test helpers to set the bound property and assert the selected value:

  Livewire::test(MyForm::class)
      ->set('userId', $user->id)
      ->assertSet('userId', $user->id);
  

• Integration tip: keep the combobox as a thin UI layer. Business logic, authorization, and validation belong in the parent Livewire component or form object.

Gotchas and Tips

• v2.1.1 is a Livewire 3 folder-structure patch. The release specifically adapts the package to Livewire 3’s directory conventions. Treat it as a drop-in patch, but if you previously published package views into an older path, republish them and diff your customizations:

  php artisan vendor:publish --force
  php artisan view:clear
  

• View path confusion after upgrading: if your customized combobox view suddenly stops being used, confirm which path Livewire 3 and the package now expect. Move your custom view to the new location rather than editing the vendor copy.
• Tailwind purging: if you use Tailwind, package classes inside vendor/ may be purged. Add the package’s published views to your tailwind.config.js content array, or safelist the relevant classes.
• Alpine duplication: Livewire 3 ships with Alpine. Do not include Alpine a second time in your layout, or the combobox keyboard behavior can break unpredictably.
• Deferred vs live updates: Livewire 3 defaults wire:model to deferred. For dependent fields or search-as-you-type, use .live deliberately and add debouncing for server-side queries.
• Stale DOM: when the options array changes, use wire:key on the combobox and on repeated option elements to avoid stale labels or selection state.
• Large payloads: avoid passing full Eloquent collections into the component. Serialize only value and label, and limit results.
• Debugging checklist:
  • Run php artisan view:clear and php artisan config:clear.
  • Check the browser console for Alpine errors.
  • Confirm the published view is actually the one being rendered.
  • Use Livewire::test() to isolate whether the issue is server-side state or front-end behavior.
• Extension points: prefer publishing and overriding the Blade view for markup changes. Keep package internals untouched so future patch releases, like v2.1.1, remain easy to apply.