From ff86d5fe5616e3020160d2020ac0dd0a95b75143 Mon Sep 17 00:00:00 2001 From: Sarin Udompanish Date: Tue, 11 Oct 2022 15:41:18 +0700 Subject: [PATCH 1/4] fix(tree): update parent item in values setter --- packages/elements/src/list/elements/list.ts | 2 +- .../elements/src/tree/__test__/tree.test.js | 14 ++++++++ packages/elements/src/tree/elements/tree.ts | 32 +++++++++++++++++-- 3 files changed, 44 insertions(+), 4 deletions(-) diff --git a/packages/elements/src/list/elements/list.ts b/packages/elements/src/list/elements/list.ts index e779c1b454..9a959b88bf 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 diff --git a/packages/elements/src/tree/__test__/tree.test.js b/packages/elements/src/tree/__test__/tree.test.js index f0888dbaa9..3f4bc8c0d9 100644 --- a/packages/elements/src/tree/__test__/tree.test.js +++ b/packages/elements/src/tree/__test__/tree.test.js @@ -396,6 +396,20 @@ 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 + }); }); describe('Filter Tests', () => { diff --git a/packages/elements/src/tree/elements/tree.ts b/packages/elements/src/tree/elements/tree.ts index c85ad911d3..bb7623fd2a 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,34 @@ 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.slice(); + const oldValue = this.values.slice(); + + newValue.sort(); + oldValue.sort(); + + // Create comparison strings to check for differences + const newComparison = newValue.toString(); + const oldComparison = oldValue.toString(); + + if (newComparison !== oldComparison) { + 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', oldValue); + } + } } /** From c0387cbbfc81749e0d8639e5dcb780298e834d8f Mon Sep 17 00:00:00 2001 From: Sarin Udompanish Date: Tue, 11 Oct 2022 15:51:27 +0700 Subject: [PATCH 2/4] docs(list): remove readonly JSDOC tag --- packages/elements/src/list/elements/list.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/elements/src/list/elements/list.ts b/packages/elements/src/list/elements/list.ts index 9a959b88bf..81ef46b3ea 100644 --- a/packages/elements/src/list/elements/list.ts +++ b/packages/elements/src/list/elements/list.ts @@ -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[] { From bd791b75c792a70249fee28e602b77648f3382e6 Mon Sep 17 00:00:00 2001 From: Sarin Udompanish Date: Mon, 17 Oct 2022 17:27:37 +0700 Subject: [PATCH 3/4] refactor(tree): shorten compare array logic --- packages/elements/src/tree/elements/tree.ts | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/elements/src/tree/elements/tree.ts b/packages/elements/src/tree/elements/tree.ts index bb7623fd2a..2a9100db7a 100644 --- a/packages/elements/src/tree/elements/tree.ts +++ b/packages/elements/src/tree/elements/tree.ts @@ -432,17 +432,10 @@ export class Tree extends List { } else { // Clone value arrays - const newValue = values.slice(); - const oldValue = this.values.slice(); + const newValue = [...values].sort().toString(); + const oldValue = [...this.values].sort().toString(); - newValue.sort(); - oldValue.sort(); - - // Create comparison strings to check for differences - const newComparison = newValue.toString(); - const oldComparison = oldValue.toString(); - - if (newComparison !== oldComparison) { + if (newValue !== oldValue) { this.manager.uncheckAllItems(); values.some((value) => { this.queryItemsByPropertyValue('value', value).forEach((item) => { @@ -450,7 +443,7 @@ export class Tree extends List { }); return !this.multiple; // Only set the fist value if multiple is not enabled }); - this.requestUpdate('values', oldValue); + this.requestUpdate('values', this.values); } } } From 992ca9f884e470fe9980456e492381bfc1717395 Mon Sep 17 00:00:00 2001 From: Sarin Udompanish Date: Fri, 21 Oct 2022 16:23:56 +0700 Subject: [PATCH 4/4] test(tree): add check set invalid values test case --- packages/elements/src/tree/__test__/tree.test.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/elements/src/tree/__test__/tree.test.js b/packages/elements/src/tree/__test__/tree.test.js index 3f4bc8c0d9..8ea94a0c49 100644 --- a/packages/elements/src/tree/__test__/tree.test.js +++ b/packages/elements/src/tree/__test__/tree.test.js @@ -410,6 +410,15 @@ describe('tree/Tree', () => { 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', () => {