fix(blocks): inconsistent language list behavior on hover in Firefox

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

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);