fix: opening drop should focus on next available option only initially (#229)

* fix: opening drop should focus on next available option only initially
- opening the drop should move highlight to next available option but only on the initial opening, meaning that if we close and reopen the drop then it should keep its highlight index. Prior to this PR, closing/reopening multiple times was moving the highlight down by 1 option every time which is wrong

Author: ghiscoding

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
   "editor.formatOnPaste": false,
   "typescript.tsdk": "node_modules\\typescript\\lib"
-}
+}

packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

@@ -29,7 +29,7 @@ export class MultipleSelectInstance {
   protected fromHtml = false;
   protected choiceElm!: HTMLButtonElement;
   protected closeElm?: HTMLElement | null;
-  protected closeSearchElm?: HTMLElement | null;
+  protected clearSearchIconElm?: HTMLElement | null;
   protected filterText = '';
   protected updateData: any[] = [];
   protected data?: Array<OptionRowData | OptGroupRowData> = [];
@@ -718,7 +718,7 @@ export class MultipleSelectInstance {
       'option-list-scroll',
     ]);
 
-    this.closeSearchElm = this.filterParentElm?.querySelector('.icon-close');
+    this.clearSearchIconElm = this.filterParentElm?.querySelector('.icon-close');
     this.searchInputElm = this.dropElm.querySelector<HTMLInputElement>('.ms-search input');
     this.selectAllElm = this.dropElm.querySelector<HTMLInputElement>(`input[data-name="${this.selectAllName}"]`);
     this.selectGroupElms = this.dropElm.querySelectorAll<HTMLInputElement>(
@@ -774,13 +774,16 @@ export class MultipleSelectInstance {
       }) as EventListener);
     }
 
-    if (this.closeSearchElm) {
-      this._bindEventService.bind(this.closeSearchElm, 'click', ((e: MouseEvent) => {
+    if (this.clearSearchIconElm) {
+      this._bindEventService.bind(this.clearSearchIconElm, 'click', ((e: MouseEvent) => {
         e.preventDefault();
         if (this.searchInputElm) {
           this.searchInputElm.value = '';
           this.searchInputElm.focus();
         }
+        // move highlight back to top of the list
+        this._currentHighlightIndex = -1;
+        this.moveFocusDown();
         this.filter();
       }) as EventListener);
     }
@@ -1096,7 +1099,14 @@ export class MultipleSelectInstance {
         ulElm.focus();
       }
     }
-    this.moveFocusDown();
+
+    if (this._currentHighlightIndex < 0) {
+      // on open drop initial, we'll focus on next available option
+      this.moveFocusDown();
+    } else {
+      // if it was already opened earlier, we'll keep same option index focused
+      this.highlightCurrentOption();
+    }
 
     if (this.options.autoAdjustDropWidthByTextSize) {
       this.adjustDropWidthByText();

playwright/e2e/options35.spec.ts

@@ -26,23 +26,21 @@ test.describe('Options 35 - Diacritic Parser', () => {
     await page.locator('[data-test=select1] .ms-search .icon-close').click();
     await expect(page.locator('[data-test=select1] .ms-search span')).toHaveText('');
 
-    await page.getByRole('textbox', { name: '🔎︎' }).fill('û');
-    await page.keyboard.press('Enter');
+    await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('û ');
     await expect(page.locator('input.in-log')).toHaveValue('û');
     await expect(page.locator('input.out-log')).toHaveValue('u');
     await expect(page.locator('[data-test=select1].ms-drop li:not(.ms-no-results)')).toHaveCount(3);
     await page.locator('[data-test=select1] .ms-search .icon-close').click();
     await page.getByRole('textbox', { name: '🔎︎' }).fill('u');
-    await page.keyboard.press('Enter');
     await page.locator('[data-test=select1] span').filter({ hasText: 'Juin' }).click();
     await page.locator('[data-test=select1] span').filter({ hasText: 'Juillet' });
     await page.locator('[data-test=select1] span').filter({ hasText: 'Août' }).click();
     const parentSpan = await page.locator('div[data-test=select1] .ms-choice span');
     await expect(parentSpan).toHaveText('Février, Juin, Août');
     await page.locator('[data-test=select1].ms-parent').click();
 
-    // // 2nd Select
-    // // --------------
+    // 2nd Select
+    // --------------
     await page.locator('[data-test=select2].ms-parent').click();
     await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('év');
     await page.locator('[data-test=select2] span').filter({ hasText: 'Février' }).click();
@@ -56,22 +54,20 @@ test.describe('Options 35 - Diacritic Parser', () => {
     await expect(page.locator('[data-test=select2] .ms-search span')).toHaveText('');
     await expect(page.locator('[data-test=select2].ms-drop li:not(.ms-no-results)')).toHaveCount(12);
 
-    await page.getByRole('textbox', { name: '🔎︎' }).fill('e');
-    await page.keyboard.press('Enter');
+    await page.getByRole('textbox', { name: '🔎︎' }).press('e');
     await expect(page.locator('[data-test=select2].ms-drop li:not(.ms-no-results)')).toHaveCount(7);
     await page.locator('[data-test=select2] .ms-search .icon-close').click();
     await expect(page.locator('[data-test=select2] .ms-search span')).toHaveText('');
 
-    await page.getByRole('textbox', { name: '🔎︎' }).fill('û');
-    await page.keyboard.press('Enter');
+    await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('û ');
     await expect(page.locator('[data-test=select2].ms-drop li:not(.ms-no-results)')).toHaveCount(3);
     await page.locator('[data-test=select2] .ms-search .icon-close').click();
-    await page.getByRole('textbox', { name: '🔎︎' }).pressSequentially('u');
+    await page.getByRole('textbox', { name: '🔎︎' }).press('u');
     await page.locator('[data-test=select2] span').filter({ hasText: 'Juin' }).click();
     await page.locator('[data-test=select2] span').filter({ hasText: 'Juillet' });
     await page.locator('[data-test=select2] span').filter({ hasText: 'Août' }).click();
     const parentSpan2 = await page.locator('div[data-test=select2] .ms-choice span');
-    await expect(parentSpan2).toHaveText('Juin, Août');
+    await expect(parentSpan2).toHaveText('Février, Juin, Août');
     await page.locator('[data-test=select2].ms-parent').click();
   });
 });