feat(tree-select): fix highlightCorrectOption (#UIM-607) (#790)

* feat(tree-select): fix highlightCorrectOption (#UIM-607) * feat(tree-select): add test (#UIM-607) Co-authored-by: oburdasov <[email protected]>
positive-js · Feb 18, 2022 · f6e3c70 · f6e3c70
1 parent 3e30f07
commit f6e3c70
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/packages/mosaic-dev/tree-select/module.ts b/packages/mosaic-dev/tree-select/module.ts
@@ -101,7 +101,7 @@ export const DATA_OBJECT = {
 export class DemoComponent {
     disabledState: boolean = false;
 
-    control = new FormControl(['Downloads', 'rootNode_1']);
+    control = new FormControl(['rootNode_1', 'Downloads']);
 
     // modelValue = 'Chrome';
     modelValue: any[] | null = ['Applications', 'Documents', 'Calendar', 'Chrome'];

diff --git a/packages/mosaic/tree-select/tree-select.component.spec.ts b/packages/mosaic/tree-select/tree-select.component.spec.ts
@@ -1821,6 +1821,25 @@ describe('McTreeSelect', () => {
                     })
                 );
 
+                it(
+                    'should focus preselected option when select is being opened',
+                    fakeAsync(() => {
+                        fixture.destroy();
+
+                        const multiFixture = TestBed.createComponent(MultiSelect);
+                        multiFixture.detectChanges();
+
+                        multiFixture.componentInstance.control.setValue(['Applications']);
+
+                        multiFixture.componentInstance.select.open();
+                        multiFixture.detectChanges();
+                        tick(10);
+
+                        const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('mc-tree-option');
+                        expect(document.activeElement).toBe(options[4]);
+                    })
+                );
+
                 it(
                     'should not shift focus when the selected options are updated programmatically in a multi select',
                     fakeAsync(() => {
@@ -1830,7 +1849,6 @@ describe('McTreeSelect', () => {
                         multiFixture.detectChanges();
                         multiFixture.detectChanges();
 
-                        select = multiFixture.debugElement.query(By.css('mc-tree-select')).nativeElement;
                         multiFixture.componentInstance.select.open();
                         multiFixture.detectChanges();
                         flush();

diff --git a/packages/mosaic/tree-select/tree-select.component.ts b/packages/mosaic/tree-select/tree-select.component.ts
@@ -1036,6 +1036,7 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
         const selectedOption = this.options.find((option) => option.value === firstSelectedValue);
 
         if (selectedOption) {
+            this.tree.keyManager.setFocusOrigin('keyboard');
             this.tree.keyManager.setActiveItem(selectedOption);
         }
     }