Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-combobox): adjust arrow-down behavior #10166

Merged
merged 6 commits into from
Nov 26, 2024
+24 −18
Merged

feat(ui5-combobox): adjust arrow-down behavior #10166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3267591
feat(ui5-combobox): adjust arrow-down behavior
ivoplashkov Nov 11, 2024
d022ee9
feat(ui5-combobox): correct tests
ivoplashkov Nov 12, 2024
1fa4fa4
Merge remote-tracking branch 'origin/main' into combobox-arrow-down
ivoplashkov Nov 12, 2024
32daed6
Merge remote-tracking branch 'origin/main' into combobox-arrow-down
ivoplashkov Nov 21, 2024
1f209f9
Merge remote-tracking branch 'origin/main' into combobox-arrow-down
ivoplashkov Nov 26, 2024
499f3b3
fix(ui5-combobox): apply feedback
ivoplashkov Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions packages/main/src/ComboBox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -721,7 +721,8 @@ class ComboBox extends UI5Element implements IFormInputElement {

this._filteredItems.forEach(item => {
if (isInstanceOfComboBoxItemGroup(item)) {
const groupedItems = [item, ...item.items];
const visibleItems = this.open ? item.items.filter(i => i._isVisible) : item.items;
const groupedItems = [item, ...visibleItems];
allItems.push(...groupedItems);
return;
}
Expand All @@ -741,7 +742,7 @@ class ComboBox extends UI5Element implements IFormInputElement {

const isOpen = this.open;
const currentItem = allItems.find(item => {
return isOpen ? item.focused : item.selected;
return item.selected || item.focused;
});

const indexOfItem = currentItem ? allItems.indexOf(currentItem) : -1;
Expand Down Expand Up @@ -849,18 +850,22 @@ class ComboBox extends UI5Element implements IFormInputElement {
return;
}

if (indexOfItem === 0 && this.hasValueStateText && isOpen) {
if (indexOfItem === 0 && this.hasValueStateText && isOpen && !this._isValueStateFocused) {
this._clearFocus();
this._itemFocused = false;
this._isValueStateFocused = true;
this._announceValueStateText();
this._filteredItems[0].selected = false;
this.value = this._userTypedValue;

return;
}

if (this._isValueStateFocused) {
this.focused = true;
this._isValueStateFocused = false;
this.value = this._userTypedValue;

return;
}

Expand Down
31 changes: 16 additions & 15 deletions packages/main/test/specs/ComboBox.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ describe("General interaction", () => {
const combo = await browser.$("#change-cb");
const placeholder = await browser.$("#change-placeholder");
const arrow = await combo.shadow$(".inputIcon");

await combo.scrollIntoView();
await arrow.click();

Expand Down Expand Up @@ -495,9 +495,9 @@ describe("General interaction", () => {
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$(".inputIcon");
const popover = await combo.shadow$("ui5-responsive-popover");

await arrow.click();

let listItems = await getVisibleItems(combo);
assert.strictEqual(listItems.length, 4, "Items should be 4");

Expand Down Expand Up @@ -713,8 +713,6 @@ describe("Grouping", () => {
await input.keys("ArrowDown");
await input.keys("ArrowDown");
await input.keys("ArrowDown");
await input.keys("ArrowDown");
await input.keys("ArrowDown");

const groupItem = (await getVisibleGroupItems(combo))[1];

Expand All @@ -725,11 +723,11 @@ describe("Grouping", () => {

it ("Pressing enter on a group item should not close the picker", async () => {
const combo = await browser.$("#combo-grouping");
const arrow = await combo.shadow$(".inputIcon");
const input = await combo.shadow$("#ui5-combobox-input");
const popover = await combo.shadow$("ui5-responsive-popover");

await input.click();
await input.keys("a");
await arrow.click();
await input.keys("ArrowDown");
await input.keys("Enter");

Expand Down Expand Up @@ -763,8 +761,8 @@ describe("Accessibility", async () => {
const arrow = await combo.shadow$(".inputIcon");
const input = await combo.shadow$("#ui5-combobox-input");
const invisibleMessageSpan = await browser.$(".ui5-invisiblemessage-polite");
const itemAnnouncement1 = "List item 1 of 11";
const itemAnnouncement2 = "List item 2 of 11";
const itemAnnouncement1 = "List item 10 of 11";
const itemAnnouncement2 = "List item 11 of 11";

await arrow.click();

Expand Down Expand Up @@ -804,8 +802,8 @@ describe("Accessibility", async () => {
const arrow = await combo.shadow$(".inputIcon");
const input = await combo.shadow$("#ui5-combobox-input");
const invisibleMessageSpan = await browser.$(".ui5-invisiblemessage-polite");
const itemAnnouncement1 = "DZ List item 1 of 10";
const itemAnnouncement2 = "AR List item 2 of 10";
const itemAnnouncement1 = "CA List item 9 of 10";
const itemAnnouncement2 = "CL List item 10 of 10";

await arrow.click();

Expand Down Expand Up @@ -940,9 +938,9 @@ describe("Accessibility", async () => {
const combo = await browser.$("#combo");
const innerInput = await combo.shadow$("input");
const popover = await combo.shadow$("ui5-responsive-popover");

await combo.scrollIntoView();

assert.strictEqual(await innerInput.getAttribute("aria-controls"), await popover.getAttribute("id"), "aria-controls attribute is correct.");
});
});
Expand Down Expand Up @@ -1377,6 +1375,7 @@ describe("Keyboard navigation", async () => {
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$(".inputIcon");


await combo.scrollIntoView();

await arrow.click();
Expand Down Expand Up @@ -1407,8 +1406,10 @@ describe("Keyboard navigation", async () => {
assert.notOk(isInVisibleArea, "Item should not be displayed in the viewport");

// click ArrowDown 16 times
await input.keys(["ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown"]);
await input.keys(["ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown"]);
for (let i = 0; i < 16; i++) {
await browser.keys("ArrowDown"),
await browser.pause(10);
}

isInVisibleArea = await browser.executeAsync(async done => {
const combobox = document.getElementById("combo-grouping");
Expand Down