chore: update trim in Autocomplete

web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx

@@ -135,7 +135,7 @@ const AddMemoRelationPopover = (props: Props) => {
         </Button>
       </PopoverTrigger>
       <PopoverContent align="center">
-        <div className="w-[16rem] flex flex-col justify-start items-start">
+        <div className="w-[16rem] p-1 flex flex-col justify-start items-start">
           <Autocomplete
             className="w-full"
             size="md"
@@ -148,7 +148,7 @@ const AddMemoRelationPopover = (props: Props) => {
             inputValue={searchText}
             value={selectedMemos}
             multiple
-            onInputChange={(_, value) => setSearchText(value.trim())}
+            onInputChange={(_, value) => setSearchText(value.trimStart())}
             getOptionKey={(memo) => memo.name}
             getOptionLabel={(memo) => memo.content}
             isOptionEqualToValue={(memo, value) => memo.name === value.name}

web/src/components/MemoEditor/ActionButton/LocationSelector.tsx

@@ -105,7 +105,7 @@ const LocationSelector = (props: Props) => {
         </Button>
       </PopoverTrigger>
       <PopoverContent align="center">
-        <div className="min-w-80 sm:w-lg flex flex-col justify-start items-start">
+        <div className="min-w-80 sm:w-lg p-1 flex flex-col justify-start items-start">
           <LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
           <div className="mt-2 w-full flex flex-row justify-between items-center gap-2">
             <div className="flex flex-row items-center justify-start gap-2">

web/src/components/MemoEditor/ActionButton/TagSelector.tsx

@@ -1,8 +1,6 @@
 import { Button } from "@usememos/mui";
 import { HashIcon } from "lucide-react";
 import { observer } from "mobx-react-lite";
-import { useRef, useState } from "react";
-import useClickAway from "react-use/lib/useClickAway";
 import OverflowTip from "@/components/kit/OverflowTip";
 import { userStore } from "@/store/v2";
 import { useTranslate } from "@/utils/i18n";
@@ -16,17 +14,11 @@ interface Props {
 const TagSelector = observer((props: Props) => {
   const t = useTranslate();
   const { editorRef } = props;
-  const [open, setOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
   const tags = Object.entries(userStore.state.tagCount)
     .sort((a, b) => a[0].localeCompare(b[0]))
     .sort((a, b) => b[1] - a[1])
     .map(([tag]) => tag);
 
-  useClickAway(containerRef, () => {
-    setOpen(false);
-  });
-
   const handleTagClick = (tag: string) => {
     const current = editorRef.current;
     if (current === null) return;
@@ -41,34 +33,32 @@ const TagSelector = observer((props: Props) => {
   };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover>
       <PopoverTrigger asChild>
         <Button variant="plain" className="p-0">
           <HashIcon className="w-5 h-5" />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" sideOffset={2}>
-        <div ref={containerRef}>
-          {tags.length > 0 ? (
-            <div className="flex flex-row justify-start items-start flex-wrap px-3 py-1 max-w-48 h-auto max-h-48 overflow-y-auto gap-x-2 gap-y-1">
-              {tags.map((tag) => {
-                return (
-                  <div
-                    key={tag}
-                    className="inline-flex w-auto max-w-full cursor-pointer text-base leading-6 text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-dark"
-                    onClick={() => handleTagClick(tag)}
-                  >
-                    <OverflowTip>#{tag}</OverflowTip>
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <p className="italic mx-2" onClick={(e) => e.stopPropagation()}>
-              {t("tag.no-tag-found")}
-            </p>
-          )}
-        </div>
+        {tags.length > 0 ? (
+          <div className="flex flex-row justify-start items-start flex-wrap px-2 max-w-48 h-auto max-h-48 overflow-y-auto gap-x-2">
+            {tags.map((tag) => {
+              return (
+                <div
+                  key={tag}
+                  className="inline-flex w-auto max-w-full cursor-pointer text-base leading-6 text-gray-500 dark:text-gray-400 hover:opacity-80"
+                  onClick={() => handleTagClick(tag)}
+                >
+                  <OverflowTip>#{tag}</OverflowTip>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <p className="italic mx-2" onClick={(e) => e.stopPropagation()}>
+            {t("tag.no-tag-found")}
+          </p>
+        )}
       </PopoverContent>
     </Popover>
   );