update tags input

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

@@ -1,7 +1,8 @@
-import type { FC } from 'react';
-import React, { useState, useCallback } from 'react';
+import type { FC, KeyboardEvent } from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
+import type { TypeaheadRef } from 'react-bootstrap-typeahead';
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 
 import { useSWRxTagsSearch } from '~/stores/tag';
@@ -16,6 +17,7 @@ export const TagsInput: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
   const { tags, autoFocus, onTagsUpdated } = props;
 
+  const tagsInputRef = useRef<TypeaheadRef>(null);
   const [resultTags, setResultTags] = useState<string[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -34,16 +36,31 @@ export const TagsInput: FC<Props> = (props: Props) => {
     setResultTags(Array.from(new Set(tagsSearchData)));
   }, [tagsSearch?.tags]);
 
+  const keyDownHandler = useCallback((event: KeyboardEvent<HTMLElement>) => {
+    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}
+        defaultSelected={tags}
         isLoading={isLoading}
         minLength={1}
-        defaultSelected={tags}
         multiple
         onChange={changeHandler}
         onSearch={searchHandler}
+        onKeyDown={keyDownHandler}
         options={resultTags} // Search result (Some tag names)
         placeholder={t('tag_edit_modal.tags_input.tag_name')}
         autoFocus={autoFocus}