diff --git a/apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css b/apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css
index 61138f2a6bf1..7038173143d2 100644
--- a/apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css
+++ b/apps/demos/Demos/SelectBox/GroupedItems/Angular/app/app.component.css
@@ -1,5 +1,9 @@
::ng-deep .custom-icon .icon {
- font-size: 17px;
color: #f05b41;
- margin-right: 2px;
+}
+
+::ng-deep .custom-icon {
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/React/styles.css b/apps/demos/Demos/SelectBox/GroupedItems/React/styles.css
index 437d26328ad2..63ce2320c355 100644
--- a/apps/demos/Demos/SelectBox/GroupedItems/React/styles.css
+++ b/apps/demos/Demos/SelectBox/GroupedItems/React/styles.css
@@ -1,5 +1,9 @@
.custom-icon .icon {
- font-size: 17px;
color: #f05b41;
- margin-right: 2px;
+}
+
+.custom-icon {
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css b/apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css
index 437d26328ad2..63ce2320c355 100644
--- a/apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css
+++ b/apps/demos/Demos/SelectBox/GroupedItems/ReactJs/styles.css
@@ -1,5 +1,9 @@
.custom-icon .icon {
- font-size: 17px;
color: #f05b41;
- margin-right: 2px;
+}
+
+.custom-icon {
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue b/apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue
index 66496ebe1912..bd738f14b7e1 100644
--- a/apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue
+++ b/apps/demos/Demos/SelectBox/GroupedItems/Vue/Group.vue
@@ -13,8 +13,12 @@ withDefaults(defineProps<{
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css b/apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css
index 437d26328ad2..63ce2320c355 100644
--- a/apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css
+++ b/apps/demos/Demos/SelectBox/GroupedItems/jQuery/styles.css
@@ -1,5 +1,9 @@
.custom-icon .icon {
- font-size: 17px;
color: #f05b41;
- margin-right: 2px;
+}
+
+.custom-icon {
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
diff --git a/apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css b/apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css
index 035fc75aaef9..01e5b0b3bd12 100644
--- a/apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css
+++ b/apps/demos/Demos/TagBox/GroupedItems/Angular/app/app.component.css
@@ -1,7 +1,11 @@
::ng-deep .custom-icon .icon {
- font-size: 17px;
color: #f05b41;
- margin-right: 2px;
+}
+
+::ng-deep .custom-icon {
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
::ng-deep .dx-field {
diff --git a/apps/demos/Demos/TagBox/GroupedItems/React/styles.css b/apps/demos/Demos/TagBox/GroupedItems/React/styles.css
index 37568462f9fb..f997c92f251f 100644
--- a/apps/demos/Demos/TagBox/GroupedItems/React/styles.css
+++ b/apps/demos/Demos/TagBox/GroupedItems/React/styles.css
@@ -1,7 +1,11 @@
.custom-icon .icon {
- font-size: 17px;
color: #f05b41;
- margin-right: 2px;
+}
+
+.custom-icon {
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
.dx-field {
diff --git a/apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css b/apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css
index 37568462f9fb..f997c92f251f 100644
--- a/apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css
+++ b/apps/demos/Demos/TagBox/GroupedItems/ReactJs/styles.css
@@ -1,7 +1,11 @@
.custom-icon .icon {
- font-size: 17px;
color: #f05b41;
- margin-right: 2px;
+}
+
+.custom-icon {
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
.dx-field {
diff --git a/apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue b/apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue
index 66496ebe1912..bd738f14b7e1 100644
--- a/apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue
+++ b/apps/demos/Demos/TagBox/GroupedItems/Vue/Group.vue
@@ -13,8 +13,12 @@ withDefaults(defineProps<{
diff --git a/apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css b/apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css
index 37568462f9fb..f997c92f251f 100644
--- a/apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css
+++ b/apps/demos/Demos/TagBox/GroupedItems/jQuery/styles.css
@@ -1,7 +1,11 @@
.custom-icon .icon {
- font-size: 17px;
color: #f05b41;
- margin-right: 2px;
+}
+
+.custom-icon {
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
.dx-field {
diff --git a/apps/demos/testing/widgets/selectbox/GroupedItems.test.js b/apps/demos/testing/widgets/selectbox/GroupedItems.test.js
new file mode 100644
index 000000000000..a8f2fc26beda
--- /dev/null
+++ b/apps/demos/testing/widgets/selectbox/GroupedItems.test.js
@@ -0,0 +1,47 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { Selector as $ } from 'testcafe';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
+
+fixture('SelectBox.GroupedItems')
+ .page('http://localhost:8080/')
+ .before(async (ctx) => {
+ ctx.initialWindowSize = [900, 600];
+ });
+
+runManualTest('SelectBox', 'GroupedItems', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
+ test('GroupedItems', async (t) => {
+ const SELECT_BOX_CLASS = 'dx-selectbox';
+ const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+ await t
+ .click($(`.${SELECT_BOX_CLASS}`).nth(0))
+ .wait(200);
+
+ await testScreenshot(t, takeScreenshot, 'selectbox_groupeditems_first_opened.png');
+
+ await t
+ .click($(`.${SELECT_BOX_CLASS}`).nth(0))
+ .wait(200);
+
+ await t
+ .click($(`.${SELECT_BOX_CLASS}`).nth(1))
+ .wait(200);
+
+ await testScreenshot(t, takeScreenshot, 'selectbox_groupeditems_second_opened.png');
+
+ await t
+ .click($(`.${SELECT_BOX_CLASS}`).nth(1))
+ .wait(200);
+
+ await t
+ .click($(`.${SELECT_BOX_CLASS}`).nth(2))
+ .wait(200);
+
+ await testScreenshot(t, takeScreenshot, 'selectbox_groupeditems_third_opened.png');
+
+ await t
+ .expect(compareResults.isValid())
+ .ok(compareResults.errorMessages());
+ });
+});
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (fluent.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (fluent.blue.light).png
new file mode 100644
index 000000000000..2744d9ef4c4b
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (material.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (material.blue.light).png
new file mode 100644
index 000000000000..3dc3ec5ef727
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened.png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened.png
new file mode 100644
index 000000000000..2795e515cfd6
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_first_opened.png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (fluent.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (fluent.blue.light).png
new file mode 100644
index 000000000000..fc86112f8270
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (material.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (material.blue.light).png
new file mode 100644
index 000000000000..2af7b026eb5e
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened.png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened.png
new file mode 100644
index 000000000000..485dffc0fda7
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_second_opened.png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent.blue.light).png
new file mode 100644
index 000000000000..a164d2a9b3ae
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (material.blue.light).png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (material.blue.light).png
new file mode 100644
index 000000000000..c19fd5d976f9
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened.png b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened.png
new file mode 100644
index 000000000000..207ebdac4531
Binary files /dev/null and b/apps/demos/testing/widgets/selectbox/etalons/selectbox_groupeditems_third_opened.png differ
diff --git a/apps/demos/testing/widgets/tagbox/GroupedItems.test.js b/apps/demos/testing/widgets/tagbox/GroupedItems.test.js
new file mode 100644
index 000000000000..c1109ab435ee
--- /dev/null
+++ b/apps/demos/testing/widgets/tagbox/GroupedItems.test.js
@@ -0,0 +1,43 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { runManualTest } from '../../../utils/visual-tests/matrix-test-helper';
+import { testScreenshot } from '../../../utils/visual-tests/helpers/theme-utils';
+
+fixture('TagBox.GroupedItems')
+ .page('http://localhost:8080/')
+ .before(async (ctx) => {
+ ctx.initialWindowSize = [900, 600];
+ });
+
+runManualTest('TagBox', 'GroupedItems', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
+ test('GroupedItems', async (t) => {
+ const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+ await t
+ .pressKey('tab')
+ .pressKey('alt+down');
+
+ await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_first_opened.png');
+
+ await t
+ .pressKey('esc')
+
+ await t
+ .pressKey('tab')
+ .pressKey('alt+down');
+
+ await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_second_opened.png');
+
+ await t
+ .pressKey('esc')
+
+ await t
+ .pressKey('tab')
+ .pressKey('alt+down');
+
+ await testScreenshot(t, takeScreenshot, 'tagbox_groupeditems_third_opened.png');
+
+ await t
+ .expect(compareResults.isValid())
+ .ok(compareResults.errorMessages());
+ });
+});
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent.blue.light).png
new file mode 100644
index 000000000000..e2f8c00ebfb6
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (material.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (material.blue.light).png
new file mode 100644
index 000000000000..45c22f3680d4
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened.png
new file mode 100644
index 000000000000..470a876c8d81
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_first_opened.png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent.blue.light).png
new file mode 100644
index 000000000000..5de81bbb86cc
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (material.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (material.blue.light).png
new file mode 100644
index 000000000000..686a775fdcdd
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened.png
new file mode 100644
index 000000000000..5d70be663736
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_second_opened.png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent.blue.light).png
new file mode 100644
index 000000000000..3865ae3e51ec
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (material.blue.light).png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (material.blue.light).png
new file mode 100644
index 000000000000..130534e91cda
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened.png b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened.png
new file mode 100644
index 000000000000..dc11796e37e0
Binary files /dev/null and b/apps/demos/testing/widgets/tagbox/etalons/tagbox_groupeditems_third_opened.png differ