fix: autocloseder for input search & button back

2026-04-04 05:13:27 +03:00
parent f537f1eab9
commit 43e16b1360
3 changed files with 113 additions and 6 deletions
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef, useCallback } from "react";
 import { FiSearch, FiFile, FiFolder, FiMinus } from "react-icons/fi";
 import { GoKebabHorizontal } from "react-icons/go";
 import { MdClose, MdAdd } from "react-icons/md";
@@ -20,6 +20,28 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
 }) => {
  const store = useIDEStore();
  const [showSearch, setShowSearch] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Фокус на инпут при открытии поиска
+  useEffect(() => {
+    if (showSearch) {
+      searchInputRef.current?.focus();
+    }
+  }, [showSearch]);
+
+  const handleSearchBlur = useCallback(() => {
+    // Скрываем поиск при потере фокуса с небольшой задержкой,
+    // чтобы клики по кнопке очистки успели сработать
+    setTimeout(() => {
+      if (
+        searchInputRef.current &&
+        !searchInputRef.current.contains(document.activeElement)
+      ) {
+        setShowSearch(false);
+        store.setSearchQuery("");
+      }
+    }, 100);
+  }, [store]);

  const handleEmptyContextMenu = (e: React.MouseEvent) => {
    e.preventDefault();
@@ -78,7 +100,14 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
        </span>
        <div style={{ display: "flex", gap: "2px", alignItems: "center" }}>
          <button
-            onClick={() => setShowSearch(!showSearch)}
+            onClick={() => {
+              if (!showSearch) {
+                setShowSearch(true);
+              } else {
+                setShowSearch(false);
+                store.setSearchQuery("");
+              }
+            }}
            style={{
              background: "transparent",
              border: "none",
@@ -196,11 +225,12 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({
          >
            <FiSearch size={13} color="#858585" />
            <input
+              ref={searchInputRef}
              type="text"
              value={store.searchQuery}
              onChange={(e) => store.setSearchQuery(e.target.value)}
+              onBlur={handleSearchBlur}
              placeholder="Search..."
-              autoFocus
              style={{
                flex: 1,
                padding: "5px 6px",