Skip to content

Commit 3e66cc6

Browse files
elenastoyanovaailhan007
elenastoyanovaa
authored and
ilhan007
committed
refactor(ui5-combobox, ui5-multi-combobox): prepare for physical list items (#9307)
As the ui5-multi-combobox & ui5-combobox will use physical items, additional adjustments need to be performed in order to have a smooth and backward compatible transition. This change renames the text property of the ui5-cb-item-group & ui5-mcb-item-group to header-text in consistency to the ui5-li-group which the ComboBoxItemGroup and MultiComboBoxItemGroup will extend once transitioning to physical items in the list. After the transition from IComboBoxItem/IMultiComboBoxItem to ListItemGroup for the group items code clean up of the non-null assertion operator can be performed as well. BREAKING CHANGE: The ui5-cb-item-group & ui5-mcb-item-group text property is renamed to header-text. If you previously used the text property: <ui5-cb-item-group text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> Now you must rename it to header-text: <ui5-cb-item-group header-text="A"> <ui5-cb-item text="Algeria"></ui5-cb-item> </ui5-cb-item-group> <ui5-mcb-item-group header-text="A"> <ui5-mcb-item text="Afghanistan"></ui5-mcb-item> </ui5-mcb-item-group> Related to: #8461
1 parent fbb948a commit 3e66cc6

File tree

11 files changed

+47
-45
lines changed

11 files changed

+47
-45
lines changed

‎packages/main/src/ComboBox.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ const SKIP_ITEMS_SIZE = 10;
9191
* @public
9292
*/
9393
interface IComboBoxItem extends UI5Element {
94-
text: string,
94+
text?: string,
95+
headerText?: string,
9596
focused: boolean,
9697
isGroupItem?: boolean,
9798
selected?: boolean,
@@ -697,7 +698,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
697698
}
698699

699700
_startsWithMatchingItems(str: string): Array<IComboBoxItem> {
700-
const allItems:Array<IComboBoxItem> = this._getItems();
701+
const allItems:Array<IComboBoxItem> = this._getItems().filter(item => !isInstanceOfComboBoxItemGroup(item));
701702
return Filters.StartsWith(str, allItems, "text");
702703
}
703704

@@ -780,13 +781,13 @@ class ComboBox extends UI5Element implements IFormInputElement {
780781

781782
if (this.open) {
782783
this._itemFocused = true;
783-
this.value = isGroupItem ? "" : currentItem.text;
784+
this.value = isGroupItem ? "" : currentItem.text!;
784785
this.focused = false;
785786

786787
currentItem.focused = true;
787788
} else {
788789
this.focused = true;
789-
this.value = isGroupItem ? nextItem.text : currentItem.text;
790+
this.value = isGroupItem ? nextItem.text! : currentItem.text!;
790791
currentItem.focused = false;
791792
}
792793

@@ -1065,7 +1066,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
10651066
return;
10661067
}
10671068

1068-
const matchingItems: Array<IComboBoxItem> = (this._startsWithMatchingItems(current).filter(item => !isInstanceOfComboBoxItemGroup(item)));
1069+
const matchingItems: Array<IComboBoxItem> = this._startsWithMatchingItems(current);
10691070

10701071
if (matchingItems.length) {
10711072
return matchingItems[0];
@@ -1168,7 +1169,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
11681169
const groupHeaderText = ComboBox.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
11691170

11701171
if (isGroupItem) {
1171-
announce(`${groupHeaderText} ${currentItem.text}`, InvisibleMessageMode.Polite);
1172+
announce(`${groupHeaderText} ${currentItem.headerText}`, InvisibleMessageMode.Polite);
11721173
} else {
11731174
announce(`${currentItemAdditionalText} ${itemPositionText}`.trim(), InvisibleMessageMode.Polite);
11741175
}

‎packages/main/src/ComboBoxItemGroup.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class ComboBoxItemGroup extends UI5Element implements IComboBoxItem {
2323
* @public
2424
*/
2525
@property()
26-
text = "";
26+
headerText = "";
2727

2828
/**
2929
* Indicates whether the item is focused

‎packages/main/src/ComboBoxPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
{{#each _filteredItems}}
8282
{{#if isGroupItem}}
8383
{{#if _isVisible}}
84-
<ui5-li-group header-text="{{ this.text }}" ?focused={{ this.focused }}>
84+
<ui5-li-group header-text="{{this.headerText}}" ?focused={{this.focused}}>
8585
{{#each this.items}}
8686
{{#if _isVisible}}
8787
{{> listItem}}

‎packages/main/src/MultiComboBox.ts

+18-17
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,8 @@ import SuggestionItem from "./SuggestionItem.js";
112112
* @public
113113
*/
114114
interface IMultiComboBoxItem extends UI5Element {
115-
text: string,
115+
text?: string,
116+
headerText?: string,
116117
selected: boolean,
117118
isGroupItem?: boolean,
118119
stableDomRef: string,
@@ -508,7 +509,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
508509
formData.append(this.name, this.value);
509510

510511
for (let i = 0; i < selectedItems.length; i++) {
511-
formData.append(this.name, selectedItems[i].text);
512+
formData.append(this.name, selectedItems[i].text!);
512513
}
513514

514515
return formData;
@@ -854,7 +855,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
854855

855856
_handleTokenCreationUponPaste(pastedText: string, e: KeyboardEvent | ClipboardEvent) {
856857
const separatedText = pastedText.split(/\r\n|\r|\n|\t/g).filter(t => !!t);
857-
const matchingItems = this._getItems().filter(item => separatedText.includes(item.text) && !item.selected);
858+
const matchingItems = this._getItems().filter(item => !item.isGroupItem && !item.selected && separatedText.includes(item.text!));
858859

859860
if (matchingItems.length > 1) {
860861
e.preventDefault();
@@ -881,7 +882,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
881882
const selectedItem = this._getSelectedItems()[0];
882883
const focusedToken = this._tokenizer.tokens.find(token => token.focused);
883884
const value = this.value;
884-
const matchingItem = this._getItems().find(item => item.text.localeCompare(value, undefined, { sensitivity: "base" }) === 0);
885+
const matchingItem = this._getItems().find(item => item.text?.localeCompare(value, undefined, { sensitivity: "base" }) === 0);
885886

886887
e.preventDefault();
887888

@@ -1207,9 +1208,9 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
12071208
return;
12081209
}
12091210

1210-
this.value = currentItem.text;
1211-
this._innerInput.value = currentItem.text;
1212-
this._innerInput.setSelectionRange(0, currentItem.text.length);
1211+
this.value = currentItem.text!;
1212+
this._innerInput.value = currentItem.text!;
1213+
this._innerInput.setSelectionRange(0, currentItem.text!.length);
12131214
}
12141215

12151216
_navigateToPrevItem() {
@@ -1244,14 +1245,14 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
12441245
return;
12451246
}
12461247

1247-
this.value = currentItem.text;
1248-
this._innerInput.value = currentItem.text;
1249-
this._innerInput.setSelectionRange(0, currentItem.text.length);
1248+
this.value = currentItem.text!;
1249+
this._innerInput.value = currentItem.text!;
1250+
this._innerInput.setSelectionRange(0, currentItem.text!.length);
12501251
}
12511252

12521253
_handleEnter() {
12531254
const lowerCaseValue = this.value.toLowerCase();
1254-
const matchingItem = this._getItems().find(item => (item.text.toLowerCase() === lowerCaseValue && !item.isGroupItem));
1255+
const matchingItem = this._getItems().find(item => (!item.isGroupItem && item.text!.toLowerCase() === lowerCaseValue));
12551256
const oldValueState = this.valueState;
12561257
const innerInput = this._innerInput;
12571258

@@ -1281,7 +1282,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
12811282
}
12821283
}
12831284

1284-
innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
1285+
innerInput.setSelectionRange(matchingItem.text!.length, matchingItem.text!.length);
12851286
this._getRespPopover().open = false;
12861287
}
12871288
}
@@ -1542,10 +1543,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
15421543
const innerInput = this._innerInput;
15431544

15441545
filterValue = filterValue || "";
1545-
this.value = value;
1546+
this.value = value!;
15461547

1547-
innerInput.value = value;
1548-
innerInput.setSelectionRange(filterValue.length, value.length);
1548+
innerInput.value = value!;
1549+
innerInput.setSelectionRange(filterValue.length, value!.length);
15491550

15501551
this._shouldAutocomplete = false;
15511552
}
@@ -1555,15 +1556,15 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
15551556
return;
15561557
}
15571558

1558-
const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem && !item.selected);
1559+
const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.selected);
15591560

15601561
if (matchingItems.length) {
15611562
return matchingItems[0];
15621563
}
15631564
}
15641565

15651566
_startsWithMatchingItems(str: string) {
1566-
return Filters.StartsWith(str, this._getItems(), "text");
1567+
return Filters.StartsWith(str, this._getItems().filter(item => !item.isGroupItem), "text");
15671568
}
15681569

15691570
_revertSelection() {

‎packages/main/src/MultiComboBoxItemGroup.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ class MultiComboBoxItemGroup extends UI5Element implements IMultiComboBoxItem {
2424
* @public
2525
*/
2626
@property()
27-
text = "";
27+
headerText = "";
2828

2929
/**
3030
* Defines the items of the <code>ui5-mcb-item-group</code>.

‎packages/main/src/MultiComboBoxPopover.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
7272
{{#each selectedItems}}
7373
{{#if isGroupItem}}
74-
<ui5-li-group header-text="{{this.text}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
74+
<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
7575
{{#each this.items}}
7676
{{#if _isVisible}}
7777
{{> listItem}}
@@ -87,7 +87,7 @@
8787
<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
8888
{{#each _filteredItems}}
8989
{{#if isGroupItem}}
90-
<ui5-li-group header-text="{{this.text}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
90+
<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
9191
{{#each this.items}}
9292
{{#if _isVisible}}
9393
{{> listItem}}

‎packages/main/test/pages/ComboBox.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -87,20 +87,20 @@
8787
<ui5-label id="combo-vs-grouping-label">Items with grouping and value state:</ui5-label>
8888

8989
<ui5-combobox id="value-state-grouping" value-state="Critical">
90-
<ui5-cb-item-group text="A">
90+
<ui5-cb-item-group header-text="A">
9191
<ui5-cb-item text="Argentina"></ui5-cb-item>
9292
<ui5-cb-item text="Australia"></ui5-cb-item>
9393
<ui5-cb-item text="Austria"></ui5-cb-item>
9494
<ui5-cb-item text="Bolivia"></ui5-cb-item>
9595
</ui5-cb-item-group>
9696

97-
<ui5-cb-item-group text="B">
97+
<ui5-cb-item-group header-text="B">
9898
<ui5-cb-item text="Bahrain"></ui5-cb-item>
9999
<ui5-cb-item text="Belgium"></ui5-cb-item>
100100
<ui5-cb-item text="Brazil"></ui5-cb-item>
101101
</ui5-cb-item-group>
102102

103-
<ui5-cb-item-group text="C">
103+
<ui5-cb-item-group header-text="C">
104104
<ui5-cb-item text="Canada"></ui5-cb-item>
105105
<ui5-cb-item text="Chile"></ui5-cb-item>
106106
</ui5-cb-item-group>
@@ -111,23 +111,23 @@
111111
<div class="demo-section">
112112
<ui5-label id="combo-grouping-label">Items with grouping:</ui5-label>
113113
<ui5-combobox filter="StartsWith" id="combo-grouping" class="combobox2auto" aria-label="Select destination:">
114-
<ui5-cb-item-group text="A">
114+
<ui5-cb-item-group header-text="A">
115115
<ui5-cb-item text="Algeria"></ui5-cb-item>
116116
<ui5-cb-item text="Argentina"></ui5-cb-item>
117117
<ui5-cb-item text="Australia"></ui5-cb-item>
118118
<ui5-cb-item text="Austria"></ui5-cb-item>
119119
</ui5-cb-item-group>
120-
<ui5-cb-item-group text="Donut">
120+
<ui5-cb-item-group header-text="Donut">
121121
<ui5-cb-item text="Bahrain"></ui5-cb-item>
122122
<ui5-cb-item text="Belgium"></ui5-cb-item>
123123
<ui5-cb-item text="Bosnia and Herzegovina"></ui5-cb-item>
124124
<ui5-cb-item text="Brazil"></ui5-cb-item>
125125
</ui5-cb-item-group>
126-
<ui5-cb-item-group text="C">
126+
<ui5-cb-item-group header-text="C">
127127
<ui5-cb-item text="Canada"></ui5-cb-item>
128128
<ui5-cb-item text="Chile"></ui5-cb-item>
129129
</ui5-cb-item-group>
130-
<ui5-cb-item-group text="Random Group Item Text">
130+
<ui5-cb-item-group header-text="Random Group Item Text">
131131
<ui5-cb-item text="Zimbabve"></ui5-cb-item>
132132
<ui5-cb-item text="Albania"></ui5-cb-item>
133133
<ui5-cb-item text="Madagascar"></ui5-cb-item>

‎packages/main/test/pages/MultiComboBox.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -363,19 +363,19 @@
363363

364364
<br>
365365
<ui5-multi-combobox id="mcb-grouping" no-validation placeholder="Select a country">
366-
<ui5-mcb-item-group text="Asia">
366+
<ui5-mcb-item-group header-text="Asia">
367367
<ui5-mcb-item text="Afghanistan"></ui5-mcb-item>
368368
<ui5-mcb-item text="China"></ui5-mcb-item>
369369
<ui5-mcb-item text="India"></ui5-mcb-item>
370370
<ui5-mcb-item text="Indonesia"></ui5-mcb-item>
371371
</ui5-mcb-item-group>
372-
<ui5-mcb-item-group text="Europe">
372+
<ui5-mcb-item-group header-text="Europe">
373373
<ui5-mcb-item text="Austria"></ui5-mcb-item>
374374
<ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
375375
<ui5-mcb-item text="Germany"></ui5-mcb-item>
376376
<ui5-mcb-item text="Italy"></ui5-mcb-item>
377377
</ui5-mcb-item-group>
378-
<ui5-mcb-item-group text="North America">
378+
<ui5-mcb-item-group header-text="North America">
379379
<ui5-mcb-item text="Canada"></ui5-mcb-item>
380380
<ui5-mcb-item text="Granada"></ui5-mcb-item>
381381
<ui5-mcb-item text="Haiti"></ui5-mcb-item>

‎packages/main/test/specs/MultiComboBox.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1773,7 +1773,7 @@ describe("MultiComboBox general interaction", () => {
17731773

17741774
let firstItem = await popover.$("ui5-list").$("ui5-li");
17751775

1776-
assert.ok(await firstItem.matches(":focus"), "The first group header should be focused");
1776+
assert.ok(await firstItem.matches(":focus"), "The first item inside the first group should be focused");
17771777
});
17781778

17791779
it("Group header keyboard handling", async () => {

‎packages/website/docs/_samples/main/ComboBox/Grouping/sample.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313

1414

1515
<ui5-combobox placeholder="Grouping of items">
16-
<ui5-cb-item-group text="A">
16+
<ui5-cb-item-group header-text="A">
1717
<ui5-cb-item text="Argentina"></ui5-cb-item>
1818
<ui5-cb-item text="Australia"></ui5-cb-item>
1919
<ui5-cb-item text="Austria"></ui5-cb-item>
2020
</ui5-cb-item-group>
21-
<ui5-cb-item-group text="B">
21+
<ui5-cb-item-group header-text="B">
2222
<ui5-cb-item text="Bahrain"></ui5-cb-item>
2323
<ui5-cb-item text="Belgium"></ui5-cb-item>
2424
<ui5-cb-item text="Brazil"></ui5-cb-item>
2525
</ui5-cb-item-group>
26-
<ui5-cb-item-group text="C">
26+
<ui5-cb-item-group header-text="C">
2727
<ui5-cb-item text="Canada"></ui5-cb-item>
2828
<ui5-cb-item text="Chile"></ui5-cb-item>
2929
</ui5-cb-item-group>

‎packages/website/docs/_samples/main/MultiComboBox/MultiComboBoxGrouping/sample.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,20 @@
1212
<!-- playground-fold-end -->
1313

1414
<ui5-multi-combobox placeholder="Select a country">
15-
<ui5-mcb-item-group text="Asia">
15+
<ui5-mcb-item-group header-text="Asia">
1616
<ui5-mcb-item text="Afghanistan"></ui5-mcb-item>
1717
<ui5-mcb-item text="China"></ui5-mcb-item>
1818
<ui5-mcb-item text="India"></ui5-mcb-item>
1919
<ui5-mcb-item text="Indonesia"></ui5-mcb-item>
2020
</ui5-mcb-item-group>
21-
<ui5-mcb-item-group text="Europe">
21+
<ui5-mcb-item-group header-text="Europe">
2222
<ui5-mcb-item text="Austria"></ui5-mcb-item>
2323
<ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
2424
<ui5-mcb-item text="Germany"></ui5-mcb-item>
2525
<ui5-mcb-item text="Italy"></ui5-mcb-item>
2626
<ui5-mcb-item text="The United Kingdom of Great Britain and Northern Ireland"></ui5-mcb-item>
2727
</ui5-mcb-item-group>
28-
<ui5-mcb-item-group text="North America">
28+
<ui5-mcb-item-group header-text="North America">
2929
<ui5-mcb-item text="Canada"></ui5-mcb-item>
3030
<ui5-mcb-item text="Granada"></ui5-mcb-item>
3131
<ui5-mcb-item text="Haiti"></ui5-mcb-item>

0 commit comments

Comments
 (0)