[Feature Request]: Using keyboard down button, item below the previously selected item should be selected but not the first item in the dropo-down

[sanketzad]

Feature Request Description

Impacted components: ui5-combobox and ui5-multi-combobox

The user has typed a character, and typeahead is displayed in the input when the drop-down is open, leading to the selection of the typeahead list item. At this stage, if the user decides to navigate through the list by using the keyboard, i.e., the down and up arrow buttons, the selection should be done on the next and previous list item, referring to the already selected item. But not selecting the first item (even if another item is selected) when the down arrow is pressed.

Please refer to the snippets below:

C is typed:

Pressing the Down arrow, it should ideally select France, instead it selects the first item in the list, i.e., South Africa.

Proposed Solution

The drop-down is open, and a list item is selected. When pressing the Down or Up arrow keys, it should select the previous or next item, referring to the already selected item. But it should not start with the first item on the list.

Proposed Alternatives

No response

Organization

Ariba

Additional Context

No response

Priority

None

Privacy Policy

• I’m not disclosing any internal or sensitive information.

[yanaminkova]

Hello @sanketzad,

I am not able to reproduce the behaviour you have described.
Can I kindly ask you to provide codesandbox example where the issue is reproducible?

Thanks and Regards,
Yana

[sanketzad]

Hi, @yanaminkova ,

I have created an example under the title ComboBox - Issue: 8238. Using this example, please press A in the input; the responsive popover opens with ui5-cb-items items selecting Austria. Now, press the down arrow button, which selects the first item on the responsive popover, i.e., India. But the requirement from the stakeholder is that, once an item is selected, pressing down arrow should select the next item to the already selected item, which means, Austria is selected, pressing down arrow it should select Poland, not India.

Please refer to the example here. And also, I request to check with the design team whether the request is aligned with design standard.

With regards,
Sanket Zad

[yanaminkova]

Hello @SAP/ui5-webcomponents-topic-rl,

Please have a look at this feature request regarding ui5-combobox and ui5-multi-combobox.

It seems that the current implementation of those components works in a way that on arrow down, always the first item in the drop down is selected, no matter whether already there is selected item or not.
Please find the descriptive steps to reproduce it in the previous comment.

Thanks and Kind regards,
Yana

[hristop]

Hi @sanketzad ,

As this is how the ComboBox component is designed and is currently working as specified, can you please raise a feature request to the Central Design team as per the Federated Process so they can have a look into it and provide their statement.
After doing so, please post the number of the BLI here, so we can monitor the progress as well.

Currently, the behavior, follows the logic that while typing, no matter if the picker is opened, the focus is in the input field and not in the list.

Best Regards,
Hristo

[sanketzad]

Hi, @hristop ,

I had the opportunity to go through the Fiori design guidelines with the help of Georg, who is a lead designer. I have to share some of the information that we found out about the keyboard DOWN button specifications, as mentioned in the following snippet:

The aforementioned specification can be downloaded or viewed here. The above mentioned snippet is on page 107.

With the "next matching item," I would personally understand the next item that fits my current input, not the first one.

Could you kindly clarify if you adhere to different specs, as everything I've said is part of the Fiori design guidelines?

WIth regards,
Sanket Zad

[hristop]

Hi @sanketzad ,

This exact behavior has been confirmed by the ACC expert, who created the document you are referring.

The focus in the mentioned components is inside of the input field, not in the list. So when you type in, additional filtration is achieved. This works a bit different in the ui5-combobox than in the ui5-multi-combobox components, but for your case the result is the same - focus in the input.
When pressing down you start moving this focus though the interactive elements of the components (value states, group headers, list items) and it goes from the input -> into the list, respectively to the first interactive element in it.

You can check page 183, which contains the keyboard specification for the combo box in particular.
What you are looking into (the light blue highlight) is the selection of the component. This is not where the focus is.

Hope this makes things more clear.

Best Regards,
Hristo

[sanketzad]

Hi @hristop ,

The recent discussion with the ACC team and Georg agreed that this is bug and the behaviour of the DOWN button should be revisited. To track this issue, Georg has created a JIRA ticket: FIORITECHE1-7968.

With regards,
Sanket Zad

[hristop]

There is internal P1 BLI created for the issue: FIORITECHP1-31509

[hristop]

Hi,

We are done with the implementation of this feature with #10166.
You can check the functionality here: https://sap.github.io/ui5-webcomponents/nightly/components/ComboBox/

Best Regards,
Hristo