Просмотр исходного кода

fix: add autofocus to keyword search input when active pane

Shun Miyazawa 7 месяцев назад
Родитель
Сommit
ebb141bbad

+ 10 - 2
apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementKeywordSearch.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useRef, useMemo, useCallback, useState, type KeyboardEvent,
+  useRef, useMemo, useCallback, useState, useEffect, type KeyboardEvent,
 } from 'react';
 
 import type { IPageHasId } from '@growi/core';
@@ -37,12 +37,13 @@ const isSelectedSearchKeyword = (value: unknown): value is SelectedSearchKeyword
 
 
 type Props = {
+  isActivePane: boolean
   baseSelectedPages: SelectablePage[],
   updateBaseSelectedPages: (pages: SelectablePage[]) => void;
 }
 
 export const AiAssistantKeywordSearch = (props: Props): JSX.Element => {
-  const { baseSelectedPages, updateBaseSelectedPages } = props;
+  const { isActivePane, baseSelectedPages, updateBaseSelectedPages } = props;
 
   const [selectedSearchKeywords, setSelectedSearchKeywords] = useState<Array<SelectedSearchKeyword>>([]);
   const {
@@ -136,6 +137,13 @@ export const AiAssistantKeywordSearch = (props: Props): JSX.Element => {
     changePageMode(isNewAiAssistant ? AiAssistantManagementModalPageMode.HOME : AiAssistantManagementModalPageMode.PAGES);
   }, [changePageMode, isNewAiAssistant, selectedPages, updateBaseSelectedPages]);
 
+  // Autofocus
+  useEffect(() => {
+    if (isActivePane) {
+      typeaheadRef.current?.focus();
+    }
+  }, [isActivePane]);
+
   return (
     <div className={moduleClass}>
       <AiAssistantManagementHeader

+ 1 - 0
apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementModal.tsx

@@ -249,6 +249,7 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
 
         <TabPane tabId={AiAssistantManagementModalPageMode.KEYWORD_SEARCH}>
           <AiAssistantKeywordSearch
+            isActivePane={pageMode === AiAssistantManagementModalPageMode.KEYWORD_SEARCH}
             baseSelectedPages={selectedPages}
             updateBaseSelectedPages={selectPageHandler}
           />