nextui-org
[BUG] - Autocomplete - Shift + Home/End isn't working
NextUI Version
2.4.8
Describe the bug
Shift + Home/End doesn't work in Autocomplete input (Text Input). It works in Input component, but not in Autocomplete. For example, I can make Shift + Left/Right Arrow and it works just fine. But the other key combination no... It happens in Firefox and Chrome browsers, in my project or even in your website... Is it possible to make it work?
Your Example Website or App
https://nextui.org/docs/components/autocomplete
Steps to Reproduce the Bug or Issue
1 - Click in autocomplete 2 - Type something... 3 - Click or move the cursor to the middle of the text, for example. 4 - Make Shift + Home/End
It will do nothing...
Expected behavior
It should Select the text from the initial position of the cursor up the start (Shift + Home) or to the end (Shift + End).
Screenshots or Videos
No response
Operating System Version
Linux
Browser
Firefox
![linear[bot] avatar](https://avatars.githubusercontent.com/in/20150?v=4 "Published by a pub.dev verified publisher"){kind=small}
It worked when I tested it in the docs. Please send a minimal reproduction. By the way, I don't think the Shift key needs to be pressed. ref: Combobox Pattern | APG | WAI | W3C
It worked when I tested it in the docs. Please send a minimal reproduction. By the way, I don't think the Shift key needs to be pressed. ref: Combobox Pattern | APG | WAI | W3C
You can check it in NextUI website or in CodeSandbox. The cursor doesn't move when you click Home / End. So when you try to make Shift + Home / End, it will not work also...
same issue, unable to select selected text with shortcut key, tested at Chorme browser in Windows OS.
I tried it again, and it works as expected. If possible, could you use a tool like KeyCastr to record your key inputs along with a screen recording and send it to me?
https://github.com/user-attachments/assets/1b54cd97-e5c7-43c1-b27e-8f5c5893bb04
It is possible to navigate in options. If you use ↓ to go there, then it is possible to use Home/End to jump to the first/last option. But I was talking about text selection in autocomplete input. Like this: Screencast from 08-10-2024 14:40:09.webm
Ah, I see. Thanks for the clarification.
When something is selected, using Home/End will work as expected. However, while the options are displayed, you’re navigating through the select element itself, which is why Home/End won’t function for text selection at that moment. I believe this is natural behavior.
I think that should happen only if the user clicked ↓ to navigate in that list with the arrows. When you are typing something and then you decide to remove half of the text with Shift + End, but it doesn't work using only your keyboard, you will need to use your mouse to select the text or close the options part to be able to remove that part of the text... If you have work with many big forms during your day, and use them multiple times, this action of always need to go to your mouse can be a bit annoying or less productive to some users... Is it possible to allow the user to use Home / End if he is interacting with the text input? If the user is navigating on options part, then Home / End will do what they do at the moment: jump to first / last option...
@ryo-manba, do you think that it will be possible to implement something like I suggested?
You make a valid point. This behavior comes from React Aria hooks. https://github.com/nextui-org/nextui/blob/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4/packages/components/autocomplete/src/use-autocomplete.ts#L20
Could you please open an issue for this problem upstream?
You make a valid point. This behavior comes from React Aria hooks.
https://github.com/nextui-org/nextui/blob/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4/packages/components/autocomplete/src/use-autocomplete.ts#L20
Could you please open an issue for this problem upstream?
I created an issue in Adobe React Spectrum: https://github.com/adobe/react-spectrum/issues/7228