search

filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
19.3k stars 2.96k forks source link

Searchable select inputs records key pressed when navigating using arrow keys. #10811

Closed dks-adaptdigital closed 10 months ago

dks-adaptdigital commented 10 months ago

Package

filament/forms

Package Version

v3.2

Laravel Version

v10.10

Livewire Version

No response

PHP Version

PHP 8.1

Problem description

I was using arrow keys to navigate a form and fill it in. When I got to the select element, which is searchable, I noticed that it recorded the arrowdown keystroke and displayed it back to me in the UI.

https://github.com/filamentphp/filament/assets/132998782/0aca0b34-fe23-4efe-a638-0af6e53cc51e

Expected behavior

I would expect the select element to not show me which key(s) I have pressed to select an option.

Steps to reproduce

  1. Clone down the repro repository provided.
  2. Set up the application (I used sail) and run it locally.
    • setup your local db
    • composer install
    • npm install
    • npm run dev
  3. Navigate to the dummies resource and click create new.
  4. Tab to the select input and press down.

Reproduction repository

https://github.com/dks-adaptdigital/filament-arrowdown-repro

Relevant log output

No response

danharrin commented 10 months ago

Duplicate of #5707, https://github.com/Choices-js/Choices/issues/1080

danharrin commented 10 months ago

Using tabs to navigate between fields should work fine

dks-adaptdigital commented 10 months ago

Apologies @danharrin I missed this when scanning through previous issues.