Mejorando la experiencia del usuario en formularios de Filament con opciones pre-cargadas

Introducción

En el proyecto landing, estamos trabajando en mejorar la experiencia de usuario en los formularios, específicamente en los selectores del Post Generator. Anteriormente, se utilizaba getSearchResultsUsing() para obtener los resultados de búsqueda, pero esto causaba que el componente se comportara como una búsqueda AJAX, mostrando el mensaje "Empieza a escribir para buscar..." en lugar de mostrar las opciones pre-cargadas.

El problema con getSearchResultsUsing()

En Filament v3, el método getSearchResultsUsing() tiene la particularidad de sobreescribir el comportamiento de options(). Esto significa que, al utilizar getSearchResultsUsing(), el componente asume que debe realizar una búsqueda AJAX, lo que impide que se muestren las opciones disponibles hasta que el usuario comience a escribir. Esto no es ideal cuando se desea que el usuario vea una lista de opciones pre-cargadas desde el principio.

La solución: options() y searchable()

Para solucionar este problema, se optó por utilizar options() en combinación con searchable(). El método options() permite definir las opciones que se mostrarán en el selector, mientras que searchable() habilita la funcionalidad de búsqueda del lado del cliente. Esto significa que las opciones se cargan inicialmente y luego se filtran a medida que el usuario escribe, proporcionando una experiencia de usuario más fluida e intuitiva.

use Filament\Forms\Components\Select;

Select::make('category_id')
    ->label('Categoría')
    ->options([
        1 => 'Opción 1',
        2 => 'Opción 2',
        3 => 'Opción 3',
        // ...
    ])
    ->searchable();

En este ejemplo, el método options() define un array asociativo con las opciones que se mostrarán en el selector. El método searchable() habilita la funcionalidad de búsqueda del lado del cliente, permitiendo al usuario filtrar las opciones a medida que escribe.

Limitando el número de opciones

Para evitar cargar demasiadas opciones, se limitó la cantidad de elementos a los 50 más recientes por selector. Esto mejora el rendimiento del componente y evita la sobrecarga de información al usuario.

Resultados

Con este cambio, los selectores del Post Generator ahora muestran las opciones pre-cargadas desde el principio, lo que facilita la selección de opciones y mejora la experiencia general del usuario. La funcionalidad de búsqueda del lado del cliente permite filtrar las opciones de manera eficiente, incluso cuando hay una gran cantidad de elementos disponibles.

Próximos pasos

Se podría considerar la implementación de una paginación para los selectores con una gran cantidad de opciones, lo que permitiría cargar las opciones de manera incremental y mejorar aún más el rendimiento del componente.