patternfly-react
patternfly-react copied to clipboard
Bug - Select - The first time you click on a filter input field, it does not have focus
Describe the problem The first time you click on a filter input field of the Select component with typeahead functionality, it does not have focus. Only after second click we get a focus and we can insert some text into it. This issue is reproducible in official documentation as well: https://www.patternfly.org/components/menus/select/#typeahead
How do you reproduce the problem?
- Add Select component on your page with typeahead functionality
- Click on it and try to insert some text in filter
Expected behavior Focus is set on the input field and we can enter values there for filtering
Actual behavior The input field does not have focus and we cannot enter filtering values there. Only after second click we get a focus and can insert some text for filtering
Screenshots
First click on the filter field (no focus on the input field):
Second click (filter gets focus but options are not visible):
What is your environment?
- OS: iOS, Windows 10, 11
- Browser: chrome, safari
- Version: any version
This behavior was fixed in one of the latest PRs: https://github.com/patternfly/patternfly-react/pull/10207/files by adding the shouldFocusFirstItemOnOpen prop and setting it to false in all typeahead select examples.
I believe it was just not released yet (or at least not in the 5.3.0 release which is on the website)
closed by #10207
We are in the last sprint of development for our Q2 release. This fix will be included.
On Wed, Jun 26, 2024 at 12:55 AM Steve Rhoades @.***> wrote:
Is there a plan to include this in a release soon?
— Reply to this email directly, view it on GitHub https://github.com/patternfly/patternfly-react/issues/10333#issuecomment-2190704993, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJNTTEZBOL4YE5EKQEEE5YDZJJCPXAVCNFSM6AAAAABHEEUN6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOJQG4YDIOJZGM . You are receiving this because you modified the open/close state.Message ID: @.***>