fix: rewrite combobox components to inline-input pattern with dark mode (Gitea #12)
Replace button+dropdown pattern with single input that becomes editable on focus. Fixes "second bar appearing" UX bug, adds dark mode, fixes z-index overlap. Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -17,7 +17,7 @@ interface ProjectComboboxProps {
|
|||||||
export function ProjectCombobox({
|
export function ProjectCombobox({
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
placeholder = "Search project…",
|
placeholder = "Search project\u2026",
|
||||||
disabled = false,
|
disabled = false,
|
||||||
status,
|
status,
|
||||||
className = "",
|
className = "",
|
||||||
@@ -43,9 +43,9 @@ export function ProjectCombobox({
|
|||||||
const selectedLabel = useMemo(() => {
|
const selectedLabel = useMemo(() => {
|
||||||
if (!value) return "";
|
if (!value) return "";
|
||||||
const fromOpen = projects.find((p) => p.id === value);
|
const fromOpen = projects.find((p) => p.id === value);
|
||||||
if (fromOpen) return `${fromOpen.shortCode} — ${fromOpen.name}`;
|
if (fromOpen) return `${fromOpen.shortCode} \u2014 ${fromOpen.name}`;
|
||||||
const fromAll = allData?.projects.find((p) => p.id === value);
|
const fromAll = allData?.projects.find((p) => p.id === value);
|
||||||
if (fromAll) return `${fromAll.shortCode} — ${fromAll.name}`;
|
if (fromAll) return `${fromAll.shortCode} \u2014 ${fromAll.name}`;
|
||||||
return value;
|
return value;
|
||||||
}, [value, projects, allData]);
|
}, [value, projects, allData]);
|
||||||
|
|
||||||
@@ -61,72 +61,68 @@ export function ProjectCombobox({
|
|||||||
return () => document.removeEventListener("mousedown", handleClick);
|
return () => document.removeEventListener("mousedown", handleClick);
|
||||||
}, [open]);
|
}, [open]);
|
||||||
|
|
||||||
function handleOpen() {
|
function handleFocus() {
|
||||||
if (disabled) return;
|
if (disabled) return;
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
setSearch("");
|
setSearch("");
|
||||||
setTimeout(() => inputRef.current?.focus(), 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function select(id: string | null) {
|
function select(id: string | null) {
|
||||||
onChange(id);
|
onChange(id);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
setSearch("");
|
setSearch("");
|
||||||
|
inputRef.current?.blur();
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`relative ${className}`} ref={containerRef}>
|
<div className={`relative ${className}`} ref={containerRef}>
|
||||||
<button
|
<div className="relative">
|
||||||
type="button"
|
<input
|
||||||
onClick={handleOpen}
|
ref={inputRef}
|
||||||
disabled={disabled}
|
type="text"
|
||||||
className={`w-full text-left px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white disabled:opacity-50 disabled:cursor-not-allowed ${
|
value={open ? search : selectedLabel}
|
||||||
open ? "border-brand-500 ring-2 ring-brand-500" : "hover:border-gray-400"
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
}`}
|
onFocus={handleFocus}
|
||||||
>
|
placeholder={placeholder}
|
||||||
<span className={selectedLabel ? "text-gray-900" : "text-gray-400"}>
|
disabled={disabled}
|
||||||
{selectedLabel || placeholder}
|
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed ${
|
||||||
</span>
|
open
|
||||||
{value && !disabled && (
|
? "border-brand-500 ring-2 ring-brand-500"
|
||||||
<span
|
: "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
|
||||||
role="button"
|
} bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500`}
|
||||||
tabIndex={0}
|
readOnly={!open}
|
||||||
onMouseDown={(e) => { e.stopPropagation(); select(null); }}
|
/>
|
||||||
onKeyDown={(e) => { if (e.key === "Enter") select(null); }}
|
{value && !disabled && !open && (
|
||||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 text-lg leading-none"
|
<button
|
||||||
|
type="button"
|
||||||
|
onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); select(null); }}
|
||||||
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none"
|
||||||
aria-label="Clear"
|
aria-label="Clear"
|
||||||
|
tabIndex={-1}
|
||||||
>
|
>
|
||||||
×
|
\u00d7
|
||||||
</span>
|
</button>
|
||||||
)}
|
)}
|
||||||
</button>
|
</div>
|
||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
<div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden">
|
<div className="absolute left-0 right-0 top-full mt-1 z-[60] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden">
|
||||||
<div className="p-2 border-b border-gray-100">
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
type="text"
|
|
||||||
value={search}
|
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
|
||||||
placeholder="Type to search…"
|
|
||||||
className="w-full px-2 py-1 text-sm border-0 outline-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<ul className="max-h-52 overflow-y-auto py-1">
|
<ul className="max-h-52 overflow-y-auto py-1">
|
||||||
{projects.length === 0 ? (
|
{projects.length === 0 ? (
|
||||||
<li className="px-3 py-2 text-sm text-gray-400">No results</li>
|
<li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
|
||||||
) : (
|
) : (
|
||||||
projects.map((p) => (
|
projects.map((p) => (
|
||||||
<li key={p.id}>
|
<li key={p.id}>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onMouseDown={() => select(p.id)}
|
onMouseDown={() => select(p.id)}
|
||||||
className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 ${
|
className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
|
||||||
p.id === value ? "bg-brand-50 text-brand-700 font-medium" : "text-gray-700"
|
p.id === value
|
||||||
|
? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
|
||||||
|
: "text-gray-700 dark:text-gray-200"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span className="font-medium text-xs text-gray-400 mr-1.5">{p.shortCode}</span>
|
<span className="font-medium text-xs text-gray-400 dark:text-gray-500 mr-1.5">{p.shortCode}</span>
|
||||||
<span>{p.name}</span>
|
<span>{p.name}</span>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ interface ResourceComboboxProps {
|
|||||||
export function ResourceCombobox({
|
export function ResourceCombobox({
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
placeholder = "Search resource…",
|
placeholder = "Search resource\u2026",
|
||||||
disabled = false,
|
disabled = false,
|
||||||
isActive = true,
|
isActive = true,
|
||||||
className = "",
|
className = "",
|
||||||
@@ -32,22 +32,22 @@ export function ResourceCombobox({
|
|||||||
{ enabled: open, staleTime: 30_000 },
|
{ enabled: open, staleTime: 30_000 },
|
||||||
);
|
);
|
||||||
|
|
||||||
const resources = data?.resources ?? [];
|
const resources = (data?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
|
||||||
|
|
||||||
// Resolve display name for currently selected value
|
const selectedQuery = trpc.resource.list.useQuery(
|
||||||
const { data: selectedData } = trpc.resource.list.useQuery(
|
{ limit: 500 },
|
||||||
{ search: undefined, limit: 500, isActive: undefined as unknown as boolean },
|
|
||||||
{ enabled: !!value && !open, staleTime: 60_000 },
|
{ enabled: !!value && !open, staleTime: 60_000 },
|
||||||
);
|
);
|
||||||
|
const selectedResources = (selectedQuery.data?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
|
||||||
|
|
||||||
const selectedLabel = useMemo(() => {
|
const selectedLabel = useMemo(() => {
|
||||||
if (!value) return "";
|
if (!value) return "";
|
||||||
const fromOpen = resources.find((r) => r.id === value);
|
const fromOpen = resources.find((r) => r.id === value);
|
||||||
if (fromOpen) return `${fromOpen.displayName} (${fromOpen.eid})`;
|
if (fromOpen) return `${fromOpen.displayName} (${fromOpen.eid})`;
|
||||||
const fromSelected = selectedData?.resources.find((r) => r.id === value);
|
const fromSelected = selectedResources.find((r) => r.id === value);
|
||||||
if (fromSelected) return `${fromSelected.displayName} (${fromSelected.eid})`;
|
if (fromSelected) return `${fromSelected.displayName} (${fromSelected.eid})`;
|
||||||
return value;
|
return value;
|
||||||
}, [value, resources, selectedData]);
|
}, [value, resources, selectedResources]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) return;
|
if (!open) return;
|
||||||
@@ -61,73 +61,69 @@ export function ResourceCombobox({
|
|||||||
return () => document.removeEventListener("mousedown", handleClick);
|
return () => document.removeEventListener("mousedown", handleClick);
|
||||||
}, [open]);
|
}, [open]);
|
||||||
|
|
||||||
function handleOpen() {
|
function handleFocus() {
|
||||||
if (disabled) return;
|
if (disabled) return;
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
setSearch("");
|
setSearch("");
|
||||||
setTimeout(() => inputRef.current?.focus(), 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function select(id: string | null) {
|
function select(id: string | null) {
|
||||||
onChange(id);
|
onChange(id);
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
setSearch("");
|
setSearch("");
|
||||||
|
inputRef.current?.blur();
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`relative ${className}`} ref={containerRef}>
|
<div className={`relative ${className}`} ref={containerRef}>
|
||||||
<button
|
<div className="relative">
|
||||||
type="button"
|
<input
|
||||||
onClick={handleOpen}
|
ref={inputRef}
|
||||||
disabled={disabled}
|
type="text"
|
||||||
className={`w-full text-left px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 bg-white disabled:opacity-50 disabled:cursor-not-allowed ${
|
value={open ? search : selectedLabel}
|
||||||
open ? "border-brand-500 ring-2 ring-brand-500" : "hover:border-gray-400"
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
}`}
|
onFocus={handleFocus}
|
||||||
>
|
placeholder={placeholder}
|
||||||
<span className={selectedLabel ? "text-gray-900" : "text-gray-400"}>
|
disabled={disabled}
|
||||||
{selectedLabel || placeholder}
|
className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed ${
|
||||||
</span>
|
open
|
||||||
{value && !disabled && (
|
? "border-brand-500 ring-2 ring-brand-500"
|
||||||
<span
|
: "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
|
||||||
role="button"
|
} bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500`}
|
||||||
tabIndex={0}
|
readOnly={!open}
|
||||||
onMouseDown={(e) => { e.stopPropagation(); select(null); }}
|
/>
|
||||||
onKeyDown={(e) => { if (e.key === "Enter") select(null); }}
|
{value && !disabled && !open && (
|
||||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 text-lg leading-none"
|
<button
|
||||||
|
type="button"
|
||||||
|
onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); select(null); }}
|
||||||
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none"
|
||||||
aria-label="Clear"
|
aria-label="Clear"
|
||||||
|
tabIndex={-1}
|
||||||
>
|
>
|
||||||
×
|
\u00d7
|
||||||
</span>
|
</button>
|
||||||
)}
|
)}
|
||||||
</button>
|
</div>
|
||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
<div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden">
|
<div className="absolute left-0 right-0 top-full mt-1 z-[60] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden">
|
||||||
<div className="p-2 border-b border-gray-100">
|
|
||||||
<input
|
|
||||||
ref={inputRef}
|
|
||||||
type="text"
|
|
||||||
value={search}
|
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
|
||||||
placeholder="Type to search…"
|
|
||||||
className="w-full px-2 py-1 text-sm border-0 outline-none"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<ul className="max-h-52 overflow-y-auto py-1">
|
<ul className="max-h-52 overflow-y-auto py-1">
|
||||||
{resources.length === 0 ? (
|
{resources.length === 0 ? (
|
||||||
<li className="px-3 py-2 text-sm text-gray-400">No results</li>
|
<li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
|
||||||
) : (
|
) : (
|
||||||
resources.map((r) => (
|
resources.map((r) => (
|
||||||
<li key={r.id}>
|
<li key={r.id}>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onMouseDown={() => select(r.id)}
|
onMouseDown={() => select(r.id)}
|
||||||
className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 ${
|
className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
|
||||||
r.id === value ? "bg-brand-50 text-brand-700 font-medium" : "text-gray-700"
|
r.id === value
|
||||||
|
? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
|
||||||
|
: "text-gray-700 dark:text-gray-200"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span>{r.displayName}</span>
|
<span>{r.displayName}</span>
|
||||||
<span className="ml-1.5 text-xs text-gray-400">{r.eid}</span>
|
<span className="ml-1.5 text-xs text-gray-400 dark:text-gray-500">{r.eid}</span>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
))
|
))
|
||||||
|
|||||||
Reference in New Issue
Block a user