fix(line-items): portal dropdown to escape overflow, hide scrollbar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-31 02:23:39 +05:30 · 2026-05-31 02:23:39 +05:30 · ce24539640
commit ce24539640
parent a9c125c21c
2 changed files with 104 additions and 108 deletions
--- a/App/components/po/po-line-items-editor.tsx
+++ b/App/components/po/po-line-items-editor.tsx
@ -350,7 +350,7 @@ export function LineItemsEditor({

  return (
    <div>
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-neutral-200">
--- a/App/components/ui/searchable-select.tsx
+++ b/App/components/ui/searchable-select.tsx
@ -1,6 +1,7 @@
 "use client";

-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState, useRef, useEffect, useLayoutEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { ChevronDown, Search, X } from "lucide-react";
 import type { AccountGroup } from "@/app/(portal)/po/new/new-po-form";

@ -28,6 +29,27 @@ export function SearchableSelect({
  const [query, setQuery] = useState("");
  const containerRef = useRef<HTMLDivElement>(null);
  const searchRef = useRef<HTMLInputElement>(null);
+  const [portalStyle, setPortalStyle] = useState<React.CSSProperties>({});
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true); }, []);
+
+  // Recalculate portal position whenever the dropdown opens
+  useLayoutEffect(() => {
+    if (!open || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const PANEL_WIDTH = 420;
+    // Prefer right-aligning with the trigger; clamp so it doesn't go off-screen left
+    const right = window.innerWidth - rect.right;
+    const left = Math.max(8, rect.right - PANEL_WIDTH);
+    setPortalStyle({
+      position: "fixed",
+      top: rect.bottom + 4,
+      left,
+      width: PANEL_WIDTH,
+      zIndex: 9999,
+    });
+  }, [open]);

  // Close on outside click / Escape
  useEffect(() => {
@ -54,103 +76,39 @@ export function SearchableSelect({
    if (open) searchRef.current?.focus();
  }, [open]);

-  // Find the display label for the current value
  const selectedItem = groups.flatMap((g) => g.items).find((i) => i.id === value);
  const selectedLabel = selectedItem ? `${selectedItem.code} — ${selectedItem.name}` : "";

-  // Filter by query (code or name, case-insensitive)
  const q = query.trim().toLowerCase();
  const filtered = q
    ? groups
        .map((g) => ({
          ...g,
          items: g.items.filter(
-            (i) =>
-              i.code.toLowerCase().includes(q) ||
-              i.name.toLowerCase().includes(q)
+            (i) => i.code.toLowerCase().includes(q) || i.name.toLowerCase().includes(q)
          ),
        }))
        .filter((g) => g.items.length > 0)
    : groups;

-  const handleSelect = useCallback(
-    (id: string) => {
+  const handleSelect = useCallback((id: string) => {
    onChange(id);
    setOpen(false);
    setQuery("");
-    },
-    [onChange]
-  );
+  }, [onChange]);

-  const handleClear = useCallback(
-    (e: React.MouseEvent) => {
+  const handleClear = useCallback((e: React.MouseEvent) => {
    e.stopPropagation();
    onChange("");
-    },
-    [onChange]
-  );
+  }, [onChange]);

  const isCompact = size === "compact";

-  return (
-    <div ref={containerRef} className="relative w-full">
-      {/* Hidden input for form submission */}
-      <input type="hidden" name={name} value={value} />
-      {required && !value && (
-        /* Invisible trick to trigger native "required" validation on submit */
-        <input
-          tabIndex={-1}
-          required
-          value={value}
-          onChange={() => {}}
-          className="absolute opacity-0 w-0 h-0 pointer-events-none"
-          aria-hidden
-        />
-      )}
-
-      {/* Trigger */}
-      <button
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        className={`w-full flex items-center justify-between gap-2 rounded-lg border
-          ${open ? "border-primary-500 ring-2 ring-primary-500/20" : "border-neutral-300"}
-          bg-white text-left transition-colors
-          focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20
-          ${isCompact ? "px-2 py-1.5 text-xs" : "px-3 py-2.5 text-sm"}`}
-      >
-        <span
-          className={`truncate flex-1 min-w-0 ${selectedLabel ? "text-neutral-900" : "text-neutral-400"}`}
-        >
-          {selectedLabel || placeholder}
-        </span>
-        <span className="flex items-center gap-1 shrink-0">
-          {value && (
-            <span
-              role="button"
-              tabIndex={0}
-              onClick={handleClear}
-              onKeyDown={(e) => e.key === "Enter" && handleClear(e as unknown as React.MouseEvent)}
-              className="text-neutral-300 hover:text-neutral-500 transition-colors"
-            >
-              <X className={isCompact ? "h-3 w-3" : "h-4 w-4"} />
-            </span>
-          )}
-          <ChevronDown
-            className={`text-neutral-400 transition-transform ${open ? "rotate-180" : ""} ${isCompact ? "h-3 w-3" : "h-4 w-4"}`}
-          />
-        </span>
-      </button>
-
-      {/* Dropdown panel
-          default: full-width anchored left
-          compact: fixed 380px anchored to right edge of trigger (won't overflow table) */}
-      {open && (
+  const dropdownPanel = (
    <div
-          className={`absolute z-50 mt-1 rounded-lg border border-neutral-200 bg-white shadow-xl
-            ${isCompact
-              ? "right-0 w-[380px]"
-              : "left-0 right-0"
-            }`}
+      style={isCompact ? portalStyle : undefined}
+      className={`rounded-lg border border-neutral-200 bg-white shadow-xl
+        ${isCompact ? "" : "absolute z-50 left-0 right-0 mt-1"}`}
    >
      {/* Search input */}
      <div className="flex items-center gap-2 p-2 border-b border-neutral-100">
@ -170,23 +128,21 @@ export function SearchableSelect({
        )}
      </div>

-          {/* Options */}
-          <div className="max-h-64 overflow-y-auto overscroll-contain">
+      {/* Options list */}
+      <div className="max-h-72 overflow-y-auto overscroll-contain [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300">
        {filtered.length === 0 ? (
-              <p className="px-3 py-5 text-sm text-center text-neutral-400">No codes match "{query}"</p>
+          <p className="px-3 py-5 text-sm text-center text-neutral-400">No codes match &ldquo;{query}&rdquo;</p>
        ) : (
          filtered.map((group) => {
-                // In compact mode show only the sub-category (after ›), not the full breadcrumb
-                const groupLabel = isCompact && group.group.includes("›")
+            // Strip top-level breadcrumb — show only the sub-category part
+            const groupLabel = group.group.includes("›")
              ? group.group.split("›").pop()!.trim()
              : group.group;
            return (
              <div key={group.group}>
-                    {/* Group header */}
                <div className="sticky top-0 px-3 py-1 text-xs font-semibold text-neutral-500 bg-neutral-50 border-b border-neutral-100 truncate">
                  {groupLabel}
                </div>
-                    {/* Items */}
                {group.items.map((item) => (
                  <button
                    key={item.id}
@ -205,6 +161,46 @@ export function SearchableSelect({
        )}
      </div>
    </div>
+  );
+
+  return (
+    <div ref={containerRef} className="relative w-full">
+      <input type="hidden" name={name} value={value} />
+      {required && !value && (
+        <input tabIndex={-1} required value={value} onChange={() => {}}
+          className="absolute opacity-0 w-0 h-0 pointer-events-none" aria-hidden />
+      )}
+
+      {/* Trigger button — same appearance for both sizes */}
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={`w-full flex items-center justify-between gap-2 rounded-lg border
+          ${open ? "border-primary-500 ring-2 ring-primary-500/20" : "border-neutral-300"}
+          bg-white text-left transition-colors
+          focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20
+          ${isCompact ? "px-2 py-1.5 text-xs" : "px-3 py-2.5 text-sm"}`}
+      >
+        <span className={`truncate flex-1 min-w-0 ${selectedLabel ? "text-neutral-900" : "text-neutral-400"}`}>
+          {selectedLabel || placeholder}
+        </span>
+        <span className="flex items-center gap-1 shrink-0">
+          {value && (
+            <span role="button" tabIndex={0} onClick={handleClear}
+              onKeyDown={(e) => e.key === "Enter" && handleClear(e as unknown as React.MouseEvent)}
+              className="text-neutral-300 hover:text-neutral-500 transition-colors">
+              <X className={isCompact ? "h-3 w-3" : "h-4 w-4"} />
+            </span>
+          )}
+          <ChevronDown className={`text-neutral-400 transition-transform ${open ? "rotate-180" : ""} ${isCompact ? "h-3 w-3" : "h-4 w-4"}`} />
+        </span>
+      </button>
+
+      {/* Dropdown: compact uses a portal (fixed) to escape overflow-x-auto containers */}
+      {open && (
+        isCompact && mounted
+          ? createPortal(dropdownPanel, document.body)
+          : dropdownPanel
      )}
    </div>
  );