fix: opening drop should focus on next available option only initially

.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();
   });
 });