From 4a42f22a44ad1986f0615a52ea5ab99a0a571912 Mon Sep 17 00:00:00 2001
From: oleg <67059482+OlegDev1@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:13:26 +0000
Subject: [PATCH] fix(blocks): inconsistent language list behavior on hover in
 Firefox

---
 .../components/filterable-list/index.ts       |  6 ++--
 tests/code/crud.spec.ts                       | 35 +++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/blocks/src/_common/components/filterable-list/index.ts b/packages/blocks/src/_common/components/filterable-list/index.ts
index 2f972919d28b..7d0adcedf321 100644
--- a/packages/blocks/src/_common/components/filterable-list/index.ts
+++ b/packages/blocks/src/_common/components/filterable-list/index.ts
@@ -60,10 +60,10 @@ export class FilterableListComponent<Props = unknown> extends WithDisposable(
       const isActiveA = this.options.active?.(a);
       const isActiveB = this.options.active?.(b);
 
-      if (isActiveA && !isActiveB) return -Infinity;
-      if (!isActiveA && isActiveB) return Infinity;
+      if (isActiveA && !isActiveB) return -1;
+      if (!isActiveA && isActiveB) return 1;
 
-      return this.listFilter?.(a, b) ?? Infinity;
+      return this.listFilter?.(a, b) ?? 0;
     });
   }
 
diff --git a/tests/code/crud.spec.ts b/tests/code/crud.spec.ts
index e9f7e4709517..fc8cc5a5a04a 100644
--- a/tests/code/crud.spec.ts
+++ b/tests/code/crud.spec.ts
@@ -590,6 +590,41 @@ test('language selection list should not close when hovering out of code block',
   await expect(langLocator).toBeVisible();
 });
 
+test('language selection list should not change when hovering over its elements', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyCodeBlockState(page);
+
+  const codeBlockController = getCodeBlock(page);
+  await codeBlockController.codeBlock.hover();
+  await codeBlockController.clickLanguageButton();
+  await waitNextFrame(page, 100);
+
+  const langListLocator = codeBlockController.langList;
+  const langItemsLocator = langListLocator.locator('icon-button');
+
+  // checking first 4 language list items
+  for (let i = 0; i < 3; i++) {
+    const item = langItemsLocator.nth(i); // current item in language list
+    const nextItem = langItemsLocator.nth(i + 1); // next item in language list
+
+    await item.hover();
+
+    const initialItemText = await item.textContent();
+    const initialNextItemText = await nextItem.textContent();
+
+    await nextItem.hover();
+
+    const currentItemText = await item.textContent();
+    const currentNextItemText = await nextItem.textContent();
+
+    // text content should remain unchanged after next item receives focus
+    expect(initialItemText).toBe(currentItemText);
+    expect(initialNextItemText).toBe(currentNextItemText);
+  }
+});
+
 test('format text in code block', async ({ page }, testInfo) => {
   await enterPlaygroundRoom(page);
   await initEmptyParagraphState(page);