- How do I install and set up williamug/searchable-select in a Laravel Livewire 3/4 project?
- Run `composer require williamug/searchable-select` and publish the views with `php artisan vendor:publish --tag=searchable-select`. Ensure Tailwind CSS is configured in your project (v3/v4 required). The package integrates via Blade components like `<x-searchable-select>`, and no additional JavaScript setup is needed beyond Alpine.js, which Livewire already includes.
- Does this package work with Laravel Livewire 2? Or is it strictly for Livewire 3/4?
- This package is **exclusively built for Livewire 3 and 4**. It leverages Livewire’s reactivity model (e.g., `wire:model`) and Alpine.js, which are not backward-compatible with Livewire 2. If you’re using Livewire 2, consider alternatives like `laravel-vue-select` or custom Alpine.js implementations.
- Can I use this dropdown with dynamic data (e.g., API responses or user-specific options)?
- Yes, the component supports dynamic data out of the box. Pass Eloquent collections, arrays, or API responses directly via the `:options` prop. For large datasets, pre-filter options in your Livewire component’s `updatedSearchTerm()` method to avoid client-side performance issues. Loading states or error handling must be managed manually (e.g., via Livewire’s `wire:loading` or custom Alpine.js logic).
- What if my Laravel project doesn’t use Tailwind CSS? Can I customize the styling without it?
- The package **requires Tailwind CSS** for styling, but you can override or extend its styles by publishing the views and modifying the included CSS. If Tailwind isn’t an option, you’ll need to manually replace its utility classes with your own CSS framework (e.g., Bootstrap, CSS Modules) or inline styles, which may require deeper customization of the Blade templates.
- How does multi-select work with form submissions in Laravel? Does it handle array inputs automatically?
- Multi-select returns an array of selected values (e.g., `[1, 2, 3]`) bound to your Livewire property. Laravel’s form validation and Eloquent will handle array inputs natively if your model fields (e.g., `selected_skills`) are defined as `array` or `json` types. For database storage, use `json` columns or serialize the array manually in your Livewire component.
- Is this component accessible (keyboard navigation, ARIA attributes)? How can I verify compliance?
- The package claims full accessibility support with ARIA attributes and keyboard navigation. To verify, test the dropdown with screen readers (e.g., NVDA, VoiceOver) and keyboard-only navigation (Tab, Arrow keys, Enter). The README provides a demo, but for thorough audits, use tools like [axe DevTools](https://www.deque.com/axe/) or [WAVE](https://wave.webaim.org/).
- Are there performance concerns with large datasets (e.g., 5,000+ options)? How can I optimize?
- Client-side filtering may lag with datasets exceeding 10,000 options. Mitigate this by pre-filtering data in your Livewire component (e.g., using `updatedSearchTerm()` to fetch only relevant options from the server). For very large datasets, implement server-side pagination or lazy-loading by splitting options into chunks or using infinite scroll with Alpine.js events like `@searchable-select:search`.
- Can I use this with Laravel Inertia.js or other frontend frameworks like Vue/React?
- This package is **Livewire-specific** and relies on Alpine.js and Livewire’s reactivity. While you could theoretically adapt it for Inertia.js by replacing Livewire’s `wire:` directives with Inertia’s props, it’s not officially supported. For Vue/React, consider alternatives like `laravel-vue-select` or `react-select`, which are framework-agnostic and designed for SPAs.
- How do I customize the dropdown’s appearance beyond Tailwind’s default classes?
- Publish the views with `php artisan vendor:publish --tag=searchable-select` to access the Blade templates. Modify the included CSS or override Tailwind classes by extending your `tailwind.config.js`. For deep customization (e.g., icons, layouts), duplicate the published templates in your project’s `resources/views/vendor/searchable-select` and edit them directly. The package supports custom props like `option-label` and `option-value` for non-standard data shapes.
- What testing strategies should I use for this Livewire component? Does it include built-in test utilities?
- The package doesn’t include built-in test utilities, but you can test it using Laravel’s testing tools like **Pest** or **Dusk**. For Livewire components, use `Livewire::test()` in Pest to simulate user interactions (e.g., typing in the search box, selecting options). Test edge cases like empty selections, keyboard navigation, and dynamic data updates. The package’s GitHub repo includes a test workflow, but you’ll need to write custom tests for your specific use cases.