fixup! ✨(frontend) interlinking custom inline content

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -731,25 +731,35 @@ test.describe('Doc Editor', () => {
     await page.locator('.bn-block-outer').last().fill('/');
     await page.getByText('Link to a doc').first().click();
 
-    await page
-      .locator(
-        "span[data-inline-content-type='interlinkingSearchInline'] input",
-      )
-      .fill('interlink-child-1');
+    const input = page.locator(
+      "span[data-inline-content-type='interlinkingSearchInline'] input",
+    );
+    const searchContainer = page.locator('.quick-search-container');
 
-    await page
-      .locator('.quick-search-container')
-      .getByText('interlink-child-1')
-      .click();
+    await input.fill('doc-interlink');
+
+    await expect(searchContainer.getByText(randomDoc)).toBeVisible();
+    await expect(searchContainer.getByText(docChild1)).toBeVisible();
+    await expect(searchContainer.getByText(docChild2)).toBeVisible();
+
+    await input.pressSequentially('-child');
+
+    await expect(searchContainer.getByText(docChild1)).toBeVisible();
+    await expect(searchContainer.getByText(docChild2)).toBeVisible();
+    await expect(searchContainer.getByText(randomDoc)).toBeHidden();
+
+    // use keydown to select the second result
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
 
     const interlink = page.getByRole('link', {
-      name: 'child-1',
+      name: 'child-2',
     });
 
     await expect(interlink).toBeVisible();
     await interlink.click();
 
-    await verifyDocName(page, docChild1);
+    await verifyDocName(page, docChild2);
   });
 
   test('it checks interlink shortcut @', async ({ page, browserName }) => {

src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx

@@ -1,5 +1,5 @@
 import { Command } from 'cmdk';
-import { ReactNode, useRef } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 
 import { hasChildrens } from '@/utils/children';
 
@@ -44,12 +44,45 @@ export const QuickSearch = ({
   children,
 }: QuickSearchProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
+  const [selectedValue, setSelectedValue] = useState<string>('');
+
+  // Auto-select first item when children change
+  useEffect(() => {
+    if (!children) {
+      setSelectedValue('');
+      return;
+    }
+
+    // Small delay for DOM to update
+    const timeoutId = setTimeout(() => {
+      const firstItem = ref.current?.querySelector('[cmdk-item]');
+      if (firstItem) {
+        const value =
+          firstItem.getAttribute('data-value') ||
+          firstItem.getAttribute('value') ||
+          firstItem.textContent?.trim() ||
+          '';
+        if (value) {
+          setSelectedValue(value);
+        }
+      }
+    }, 50);
+
+    return () => clearTimeout(timeoutId);
+  }, [children]);
 
   return (
     <>
       <QuickSearchStyle />
       <div className="quick-search-container">
-        <Command label={label} shouldFilter={false} ref={ref}>
+        <Command
+          label={label}
+          shouldFilter={false}
+          ref={ref}
+          value={selectedValue}
+          onValueChange={setSelectedValue}
+          tabIndex={0}
+        >
           {showInput && (
             <QuickSearchInput
               loading={loading}

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/SearchPage.tsx

@@ -123,7 +123,10 @@ export const SearchPage = ({
             setSearch(value);
           }}
           onKeyDown={(e) => {
-            if (e.key === 'Backspace' && search.length === 0) {
+            if (
+              (e.key === 'Backspace' && search.length === 0) ||
+              e.key === 'Escape'
+            ) {
               e.preventDefault();
 
               updateInlineContent({
@@ -137,6 +140,30 @@ export const SearchPage = ({
               contentRef(null);
               editor.focus();
               editor.insertInlineContent(['']);
+            } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+              // Allow arrow keys to be handled by the command menu for navigation
+              const commandList = e.currentTarget
+                .closest('.inline-content')
+                ?.nextElementSibling?.querySelector('[cmdk-list]');
+
+              // Create a synthetic keyboard event for the command menu
+              const syntheticEvent = new KeyboardEvent('keydown', {
+                key: e.key,
+                bubbles: true,
+                cancelable: true,
+              });
+              commandList?.dispatchEvent(syntheticEvent);
+              e.preventDefault();
+            } else if (e.key === 'Enter') {
+              // Handle Enter key to select the currently highlighted item
+              const selectedItem = e.currentTarget
+                .closest('.inline-content')
+                ?.nextElementSibling?.querySelector(
+                  '[cmdk-item][data-selected="true"]',
+                ) as HTMLElement;
+
+              selectedItem?.click();
+              e.preventDefault();
             }
           }}
         />
@@ -204,8 +231,9 @@ export const SearchPage = ({
                       title: doc.title || untitledDocument,
                     },
                   },
-                  ' ',
                 ]);
+
+                editor.focus();
               }}
               renderElement={(doc) => (
                 <QuickSearchItemContent

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchSubPageContent.tsx

@@ -1,6 +1,6 @@
 import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
 import { t } from 'i18next';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
 import { InView } from 'react-intersection-observer';
 
 import { QuickSearchData, QuickSearchGroup } from '@/components/quick-search';
@@ -43,10 +43,19 @@ export const DocSearchSubPageContent = ({
       enabled: !!treeContext?.root?.id,
     },
   );
+  const [docsData, setDocsData] = useState<QuickSearchData<Doc>>({
+    groupName: '',
+    elements: [],
+    emptyString: '',
+  });
 
   const loading = isFetching || isRefetching || isLoading;
 
-  const docsData: QuickSearchData<Doc> = useMemo(() => {
+  useEffect(() => {
+    if (loading) {
+      return;
+    }
+
     const subDocs = subDocsData?.pages.flatMap((page) => page.results) || [];
 
     if (treeContext?.root) {
@@ -59,7 +68,7 @@ export const DocSearchSubPageContent = ({
       }
     }
 
-    return {
+    setDocsData({
       groupName: subDocs.length > 0 ? t('Select a doc') : '',
       elements: search ? subDocs : [],
       emptyString: search ? t('No document found') : t('Search by title'),
@@ -70,8 +79,9 @@ export const DocSearchSubPageContent = ({
             },
           ]
         : [],
-    };
+    });
   }, [
+    loading,
     search,
     subDocsData?.pages,
     subDocsFetchNextPage,