update Tags input tsx

apps/app/src/components/PageTags/TagsInput.tsx

@@ -1,19 +1,11 @@
-import React, {
-  FC, useRef, useState, useCallback,
-} from 'react';
+import type { FC } from 'react';
+import React, { useState, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 
 import { useSWRxTagsSearch } from '~/stores/tag';
 
-type TypeaheadInstance = {
-  _handleMenuItemSelect: (activeItem: string, event: React.KeyboardEvent) => void,
-  state: {
-    initialItem: string,
-  },
-}
-
 type Props = {
   tags: string[],
   autoFocus: boolean,
@@ -24,7 +16,6 @@ export const TagsInput: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
   const { tags, autoFocus, onTagsUpdated } = props;
 
-  const tagsInputRef = useRef<TypeaheadInstance>(null);
   const [resultTags, setResultTags] = useState<string[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -33,9 +24,7 @@ export const TagsInput: FC<Props> = (props: Props) => {
   const isLoading = error == null && tagsSearch === undefined;
 
   const changeHandler = useCallback((selected: string[]) => {
-    if (onTagsUpdated != null) {
-      onTagsUpdated(selected);
-    }
+    onTagsUpdated(selected);
   }, [onTagsUpdated]);
 
   const searchHandler = useCallback(async(query: string) => {
@@ -43,39 +32,21 @@ export const TagsInput: FC<Props> = (props: Props) => {
     setSearchQuery(query);
     tagsSearchData.unshift(query);
     setResultTags(Array.from(new Set(tagsSearchData)));
-
   }, [tagsSearch?.tags]);
 
-  const keyDownHandler = useCallback((event: React.KeyboardEvent) => {
-    if (event.key === ' ') {
-      event.preventDefault();
-
-      const initialItem = tagsInputRef?.current?.state?.initialItem;
-      const handleMenuItemSelect = tagsInputRef?.current?._handleMenuItemSelect;
-
-      if (initialItem != null && handleMenuItemSelect != null) {
-        handleMenuItemSelect(initialItem, event);
-      }
-    }
-  }, []);
-
   return (
     <div className="tag-typeahead">
       <AsyncTypeahead
         id="tag-typeahead-asynctypeahead"
-        ref={tagsInputRef}
-        caseSensitive={false}
-        defaultSelected={tags}
+        options={resultTags} // Search result (Some tag names)
         isLoading={isLoading}
-        minLength={1}
+        onSearch={searchHandler}
+        defaultSelected={tags}
         multiple
-        newSelectionPrefix=""
         onChange={changeHandler}
-        onSearch={searchHandler}
-        onKeyDown={keyDownHandler}
-        options={resultTags} // Search result (Some tag names)
         placeholder={t('tag_edit_modal.tags_input.tag_name')}
         autoFocus={autoFocus}
+        minLength={1}
       />
     </div>
   );