From 031d477630a09dea87b781165f06d16e830b5e99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F=D1=81=20=D0=A1=D1=83=D0=BB=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=BE=D0=B2?= <si@op16.ru>
Date: Fri, 24 Jul 2026 14:14:56 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20=D0=B2=D1=8B=D0=B1=D1=80=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20=D0=BF=D0=BE=D0=B7=D0=B8=D1=86=D0=B8=D0=B8?=
 =?UTF-8?q?=20=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BE=D1=87=D0=BD=D0=B8=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B0=D1=8E?=
 =?UTF-8?q?=D1=82=D1=81=D1=8F=20=D0=B3=D0=BE=D1=80=D0=B8=D0=B7=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=20=D1=80=D1=8F=D0=B4=D0=BE?=
 =?UTF-8?q?=D0=BC=20=D1=81=20=D0=BF=D0=BE=D0=BB=D0=B5=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TableFieldMultiSelect.tsx  | 188 +++++++++---------
 1 file changed, 93 insertions(+), 95 deletions(-)

diff --git a/client/src/components/TableFieldMultiSelect.tsx b/client/src/components/TableFieldMultiSelect.tsx
index 92ba430..c635d23 100644
--- a/client/src/components/TableFieldMultiSelect.tsx
+++ b/client/src/components/TableFieldMultiSelect.tsx
@@ -142,102 +142,100 @@ export default function TableFieldMultiSelect({
   }
 
   return (
-    <Popover open={isOpen} onOpenChange={setIsOpen} modal={false}>
-      <PopoverAnchor asChild>
-        <div className="relative w-full">
-          <Input
-            ref={inputRef}
-            className="h-8"
-            placeholder={placeholder || 'Выберите значения...'}
-            value={isOpen ? searchTerm : (selectedLabels.length > 0 ? `${selectedLabels.length} выбрано` : placeholder || 'Выберите значения...')}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-              setIsOpen(true);
-            }}
-            onFocus={() => {
-              setSearchTerm('');
-              setIsOpen(true);
-            }}
-            data-testid={`select-table-multi-${fieldCode}`}
-          />
-        </div>
-      </PopoverAnchor>
-      <PopoverContent
-        className="p-0"
-        style={{ width: 'var(--radix-popper-anchor-width)' }}
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        onInteractOutside={(e) => {
-          if (inputRef.current && inputRef.current.contains(e.target as Node)) {
-            e.preventDefault();
-          }
-        }}
-      >
-        <div
-          className="max-h-60 overflow-auto"
-          onWheel={(e) => {
-            const el = e.currentTarget;
-            const isUp = e.deltaY < 0;
-            const isDown = e.deltaY > 0;
-            const atTop = el.scrollTop <= 0;
-            const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
-            if ((isUp && atTop) || (isDown && atBottom)) return;
-            e.preventDefault();
-            el.scrollTop += e.deltaY;
+    <div className="flex flex-wrap items-center gap-1 w-full">
+      <Popover open={isOpen} onOpenChange={setIsOpen} modal={false}>
+        <PopoverAnchor asChild>
+          <div className="relative flex-1 min-w-[120px]">
+            <Input
+              ref={inputRef}
+              className="h-8"
+              placeholder={placeholder || 'Выберите значения...'}
+              value={isOpen ? searchTerm : (selectedLabels.length > 0 ? `${selectedLabels.length} выбрано` : placeholder || 'Выберите значения...')}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setIsOpen(true);
+              }}
+              onFocus={() => {
+                setSearchTerm('');
+                setIsOpen(true);
+              }}
+              data-testid={`select-table-multi-${fieldCode}`}
+            />
+          </div>
+        </PopoverAnchor>
+        <PopoverContent
+          className="p-0"
+          style={{ width: 'var(--radix-popper-anchor-width)' }}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onInteractOutside={(e) => {
+            if (inputRef.current && inputRef.current.contains(e.target as Node)) {
+              e.preventDefault();
+            }
           }}
         >
-          {hasTree ? (
-            <DirectoryTreeMultiSelect
-              nodes={nodes}
-              selected={selectedSet}
-              onToggle={toggle}
-              searchTerm={searchTerm}
-            />
-          ) : (
-            <ul className="py-1">
-              {filtered.map((row) => {
-                const rowId = row.id.toString();
-                const label = row.values[displayColumnIndex!] || row.values[0] || rowId;
-                return (
-                  <li
-                    key={row.id}
-                    className="flex items-center gap-2 px-3 py-2 hover:bg-accent cursor-pointer text-sm"
-                    title={label}
-                    onMouseDown={(e) => { e.preventDefault(); toggle(rowId); }}
-                  >
-                    <Checkbox checked={selectedSet.has(rowId)} />
-                    <Table className="w-3 h-3 text-muted-foreground flex-shrink-0" />
-                    <span className="flex-1">{label}</span>
-                  </li>
-                );
-              })}
-              {filtered.length === 0 && (
-                <li className="px-3 py-2 text-sm text-muted-foreground">Нет совпадений</li>
-              )}
-            </ul>
-          )}
-        </div>
-      </PopoverContent>
-      {selectedLabels.length > 0 && (
-        <div className="flex flex-wrap gap-1 mt-1.5">
-          {selectedLabels.map((label, idx) => {
-            const rowId = selectedValues[idx];
-            return (
-              <div key={rowId} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-xs">
-                <span className="truncate max-w-[150px]">{label}</span>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-4 w-4"
-                  onClick={() => toggle(rowId)}
-                >
-                  <X className="w-3 h-3" />
-                </Button>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </Popover>
+          <div
+            className="max-h-60 overflow-auto"
+            onWheel={(e) => {
+              const el = e.currentTarget;
+              const isUp = e.deltaY < 0;
+              const isDown = e.deltaY > 0;
+              const atTop = el.scrollTop <= 0;
+              const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+              if ((isUp && atTop) || (isDown && atBottom)) return;
+              e.preventDefault();
+              el.scrollTop += e.deltaY;
+            }}
+          >
+            {hasTree ? (
+              <DirectoryTreeMultiSelect
+                nodes={nodes}
+                selected={selectedSet}
+                onToggle={toggle}
+                searchTerm={searchTerm}
+              />
+            ) : (
+              <ul className="py-1">
+                {filtered.map((row) => {
+                  const rowId = row.id.toString();
+                  const label = row.values[displayColumnIndex!] || row.values[0] || rowId;
+                  return (
+                    <li
+                      key={row.id}
+                      className="flex items-center gap-2 px-3 py-2 hover:bg-accent cursor-pointer text-sm"
+                      title={label}
+                      onMouseDown={(e) => { e.preventDefault(); toggle(rowId); }}
+                    >
+                      <Checkbox checked={selectedSet.has(rowId)} />
+                      <Table className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                      <span className="flex-1">{label}</span>
+                    </li>
+                  );
+                })}
+                {filtered.length === 0 && (
+                  <li className="px-3 py-2 text-sm text-muted-foreground">Нет совпадений</li>
+                )}
+              </ul>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+      {selectedLabels.map((label, idx) => {
+        const rowId = selectedValues[idx];
+        return (
+          <div key={rowId} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-xs shrink-0">
+            <span className="truncate max-w-[150px]">{label}</span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-4 w-4"
+              onClick={() => toggle(rowId)}
+            >
+              <X className="w-3 h-3" />
+            </Button>
+          </div>
+        );
+      })}
+    </div>
   );
 }