diff --git a/packages/elements/src/list/elements/list.ts b/packages/elements/src/list/elements/list.ts index e779c1b454..81ef46b3ea 100644 --- a/packages/elements/src/list/elements/list.ts +++ b/packages/elements/src/list/elements/list.ts @@ -26,7 +26,7 @@ enum Direction { DOWN = 1 } -const valueFormatWarning = new WarningNotice('The specified \'values\' format does not conform to the required format.'); +export const valueFormatWarning = new WarningNotice('The specified \'values\' format does not conform to the required format.'); /** * Provides listing and immutable selection @@ -162,7 +162,6 @@ export class List extends ControlElement { * selected item values * @type {string[]} * @default [] - * @readonly */ @property({ type: Array, attribute: false }) public get values (): string[] { diff --git a/packages/elements/src/tree/__test__/tree.test.js b/packages/elements/src/tree/__test__/tree.test.js index f0888dbaa9..8ea94a0c49 100644 --- a/packages/elements/src/tree/__test__/tree.test.js +++ b/packages/elements/src/tree/__test__/tree.test.js @@ -396,6 +396,29 @@ describe('tree/Tree', () => { expect(el.value).to.equal('1.1'); expect(el.values).to.deep.equal(['1.1', '1.2']); }); + + it('Update the parent selected state correctly', async () => { + const el = await fixture(''); + el.data = nestedData; + await elementUpdated(el); + const item = el.children[0]; + expect(item.checkedState).to.equal(-1); // Indeterminate + el.values = []; + await elementUpdated(el); + expect(item.checkedState).to.equal(0); // Unchecked + el.values = ['1.1']; + await elementUpdated(el); + expect(item.checkedState).to.equal(-1); // Indeterminate + }); + + it('Should set values to empty array when set invalid values', async () => { + const el = await fixture(''); + el.data = nestedData; + await elementUpdated(el); + el.values = '1.1'; + await elementUpdated(el); + expect(el.values).to.deep.equal([]); + }); }); describe('Filter Tests', () => { diff --git a/packages/elements/src/tree/elements/tree.ts b/packages/elements/src/tree/elements/tree.ts index c85ad911d3..2a9100db7a 100644 --- a/packages/elements/src/tree/elements/tree.ts +++ b/packages/elements/src/tree/elements/tree.ts @@ -7,7 +7,7 @@ import { property } from '@refinitiv-ui/core/decorators/property.js'; import { VERSION } from '../../version.js'; import { CollectionComposer } from '@refinitiv-ui/utils/collection.js'; -import { List } from '../../list/index.js'; +import { List, valueFormatWarning } from '../../list/index.js'; import { TreeRenderer } from '../helpers/renderer.js'; import { defaultFilter } from '../helpers/filter.js'; import type { TreeData, TreeDataItem, TreeFilter } from '../helpers/types'; @@ -425,8 +425,27 @@ export class Tree extends List { return this.composer.getItemPropertyValue(item, 'value') as string || ''; }); } - public set values (value: string[]) { - super.values = value; + public set values (values: string[]) { + if (!Array.isArray(values)) { + valueFormatWarning.show(); + this.values = []; + } + else { + // Clone value arrays + const newValue = [...values].sort().toString(); + const oldValue = [...this.values].sort().toString(); + + if (newValue !== oldValue) { + this.manager.uncheckAllItems(); + values.some((value) => { + this.queryItemsByPropertyValue('value', value).forEach((item) => { + this.manager.checkItem(item); + }); + return !this.multiple; // Only set the fist value if multiple is not enabled + }); + this.requestUpdate('values', this.values); + } + } } /**