- #51: Add permanent redirect /login → /auth/signin in next.config.ts so users/testers who type the common alias land on the correct auth page - #53: Add "Allocations → New Planning Entry" link to empty states of ProjectDemandsTable and ProjectAssignmentsTable; add shortcut link in demands table header for canEdit users - #54: Track confirmed dropdown selection in ResourcePersonPicker — green ring + checkmark icon shown when user picks from suggestions; cleared on any manual keypress so free-text is clearly unconfirmed Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -309,6 +309,9 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
|
||||
const [query, setQuery] = useState(value);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [debouncedSearch, setDebouncedSearch] = useState("");
|
||||
// Tracks whether the current value was explicitly chosen from the dropdown
|
||||
// vs typed as free text. Cleared on any manual keypress.
|
||||
const [isConfirmed, setIsConfirmed] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Debounce search query to avoid excessive API calls
|
||||
@@ -331,6 +334,8 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
|
||||
// Sync local query when external value changes (e.g. wizard reset)
|
||||
useEffect(() => {
|
||||
setQuery(value);
|
||||
// If the external value is cleared (reset), also clear the confirmed state
|
||||
if (!value) setIsConfirmed(false);
|
||||
}, [value]);
|
||||
|
||||
const { panelRef, position } = useAnchoredOverlay<HTMLInputElement>({
|
||||
@@ -350,12 +355,20 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
onChange(e.target.value);
|
||||
setIsConfirmed(false); // User is typing — selection no longer confirmed
|
||||
setOpen(true);
|
||||
}}
|
||||
onFocus={() => setOpen(true)}
|
||||
placeholder="Search by name or EID…"
|
||||
className={INPUT_CLS}
|
||||
className={`${INPUT_CLS} ${isConfirmed ? "ring-2 ring-green-400 ring-offset-0" : ""}`}
|
||||
/>
|
||||
{isConfirmed && (
|
||||
<span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-green-500">
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
{open && filtered.length > 0 && typeof document !== "undefined"
|
||||
? createPortal(
|
||||
<div
|
||||
@@ -376,6 +389,7 @@ function ResourcePersonPicker({ value, onChange }: { value: string; onChange: (v
|
||||
onMouseDown={() => {
|
||||
onChange(r.displayName);
|
||||
setQuery(r.displayName);
|
||||
setIsConfirmed(true);
|
||||
setOpen(false);
|
||||
}}
|
||||
className="flex w-full items-baseline gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50"
|
||||
|
||||
Reference in New Issue
Block a user