diff --git a/packages/elements/src/combo-box/__test__/combo-box.interaction.test.js b/packages/elements/src/combo-box/__test__/combo-box.interaction.test.js
index 9c296e51c8..889d4ec5a9 100644
--- a/packages/elements/src/combo-box/__test__/combo-box.interaction.test.js
+++ b/packages/elements/src/combo-box/__test__/combo-box.interaction.test.js
@@ -1,5 +1,5 @@
import { fixture, expect, elementUpdated, keyboardEvent, nextFrame, isIE } from '@refinitiv-ui/test-helpers';
-import { getData, openedUpdated, makeQueryRequest, onFocusEl } from './utils';
+import { getData, openedUpdated, makeQueryRequest, onFocusEl, dispatchCustomEvent } from './utils';
import '@refinitiv-ui/elements/combo-box';
import '@refinitiv-ui/elemental-theme/light/ef-combo-box';
@@ -8,13 +8,6 @@ import '@refinitiv-ui/elemental-theme/light/ef-combo-box';
// set this flag to false to run all tests locally in IE
const skipCITest = isIE() && true;
-const dispatchCustomEvent = async (el, eventName) => {
- el.dispatchEvent(new CustomEvent(eventName, {
- bubbles: true,
- composed: true
- }));
-};
-
describe('combo-box/Interaction', () => {
describe('Can Open Popup By Different Means', () => {
it('Tapping on combo-box should open popup', async function () {
diff --git a/packages/elements/src/combo-box/__test__/combo-box.value.test.js b/packages/elements/src/combo-box/__test__/combo-box.value.test.js
index 11090fcba8..a6f190820d 100644
--- a/packages/elements/src/combo-box/__test__/combo-box.value.test.js
+++ b/packages/elements/src/combo-box/__test__/combo-box.value.test.js
@@ -1,5 +1,5 @@
-import { fixture, expect, elementUpdated, nextFrame } from '@refinitiv-ui/test-helpers';
-import { getData, openedUpdated, snapshotIgnore, makeQueryRequest } from './utils';
+import { fixture, expect, elementUpdated, nextFrame, oneEvent } from '@refinitiv-ui/test-helpers';
+import { getData, openedUpdated, snapshotIgnore, makeQueryRequest, dispatchCustomEvent } from './utils';
import '@refinitiv-ui/elements/combo-box';
import '@refinitiv-ui/elemental-theme/light/ef-combo-box';
@@ -59,7 +59,10 @@ describe('combo-box/Value', () => {
expect(el).shadowDom.to.equalSnapshot(snapshotIgnore);
});
- it('Free text. Set any value via API', async () => {
+ });
+ describe('Free Text mode', () => {
+
+ it('Set any value via API', async () => {
const el = await fixture('');
el.data = getData();
await openedUpdated(el);
@@ -76,7 +79,42 @@ describe('combo-box/Value', () => {
expect(el.value).to.equal('Any', 'Value must be "Any" string');
});
- it('Free text. Reset value via API', async () => {
+ it('Set any value via API then select value in the list', async () => {
+ // set value via attribute
+ const el = await fixture('');
+ el.data = getData();
+ await openedUpdated(el);
+
+ let afItem = el.listEl.querySelectorAll('ef-list-item')[1]; // AF, Afghanistan
+ setTimeout(() => dispatchCustomEvent(afItem, 'tap'));
+
+ const attributeEvent = await oneEvent(el, 'value-changed');
+ expect(attributeEvent.detail.value).to.equal('AF', `value-changed event's value doesn't equal selected value`);
+
+ // set value via input element
+ await makeQueryRequest(el, 'A');
+
+ const axItem = el.listEl.querySelectorAll('ef-list-item')[2]; // AX, AAland Islands
+ setTimeout(() => dispatchCustomEvent(axItem, 'tap'));
+
+ const inputEvent = await oneEvent(el, 'value-changed');
+ expect(inputEvent.detail.value).to.equal('AX', `value-changed event's value doesn't equal selected value`);
+
+ // set value via property
+ // cleanup first
+ el.value = '';
+ await elementUpdated(el);
+
+ el.value = 'property';
+
+ const alItem = el.listEl.querySelectorAll('ef-list-item')[3]; // AL, Albania
+ setTimeout(() => dispatchCustomEvent(alItem, 'tap'));
+
+ const propertyEvent = await oneEvent(el, 'value-changed');
+ expect(propertyEvent.detail.value).to.equal('AL', `value-changed event's value doesn't equal selected value`);
+ });
+
+ it('Reset value via API', async () => {
const el = await fixture('');
el.data = getData();
await openedUpdated(el);
diff --git a/packages/elements/src/combo-box/__test__/utils.js b/packages/elements/src/combo-box/__test__/utils.js
index 13ffae682b..b58a8b144f 100644
--- a/packages/elements/src/combo-box/__test__/utils.js
+++ b/packages/elements/src/combo-box/__test__/utils.js
@@ -6,13 +6,14 @@ export const snapshotIgnore = {
/**
* Cross browser function to wait while select element becomes opened/closed and resized
+ * @async
* @param {Select} el Select
- * @returns {void}
+ * @returns {Promise} Empty promise
*/
export const openedUpdated = async (el) => {
await elementUpdated(el);
await nextFrame();
- await nextFrame(); // IE11 needs a second iframe, otherwise resize observer is not run;
+ await nextFrame(); // IE11 needs another frame, otherwise resize observer is not run;
};
export const data = [{
@@ -55,3 +56,10 @@ export const makeQueryRequest = async (el, textInput) => {
await elementUpdated(el);
await aTimeout(100);
};
+
+export const dispatchCustomEvent = (el, eventName) => {
+ el.dispatchEvent(new CustomEvent(eventName, {
+ bubbles: true,
+ composed: true
+ }));
+};
diff --git a/packages/elements/src/combo-box/index.ts b/packages/elements/src/combo-box/index.ts
index dd40bb351f..aa29e6498b 100644
--- a/packages/elements/src/combo-box/index.ts
+++ b/packages/elements/src/combo-box/index.ts
@@ -968,8 +968,8 @@ export class ComboBox extends FormFieldElement {
*/
protected onListValueChanged (): void {
// cascade value changed event
- this.notifyPropertyChange('value', this.value);
this.onListInteraction();
+ this.notifyPropertyChange('value', this.value);
}
/**