fix(tree): update parent item in values setter (#496)

* fix(tree): update parent item in values setter * docs(list): remove readonly JSDOC tag * refactor(tree): shorten compare array logic * test(tree): add check set invalid values test case Co-authored-by: Sarin Udompanish <[email protected]> Co-authored-by: Nantawat Poothong <[email protected]>
Refinitiv · Oct 21, 2022 · 0409fd4 · 0409fd4
1 parent 3c7275b
commit 0409fd4
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 5 deletions.
diff --git 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<T extends DataItem = ItemData> 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
@@ -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('<ef-tree multiple></ef-tree>');
+      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('<ef-tree multiple></ef-tree>');
+      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
@@ -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<T extends TreeDataItem = TreeDataItem> extends List<T> {
       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);
+      }
+    }
   }
 
   /**