monadical/common-availability
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve participant selection #5

Merged
Joyce merged 1 commits from more-improvements-autofocus into main 2026-02-02 19:13:08 +00:00
Conversation 0 Commits 1 Files Changed 1 +7 -4
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/ParticipantSelector.tsx
View File

@@ -41,11 +41,14 @@ export const ParticipantSelector = ({
const addParticipant = useCallback((participant: Participant) => { const addParticipant = useCallback((participant: Participant) => {
onSelectionChange([...selectedParticipants, participant]); onSelectionChange([...selectedParticipants, participant]);
setSearchQuery(''); setSearchQuery('');
setHighlightedIndex(0); // Keep dropdown open for multi-select; clamp highlight to new list length
setIsDropdownOpen(false); setHighlightedIndex((prev) => {
// Re-focus input after selection const newLength = filteredParticipants.length - 1;
return prev >= newLength ? Math.max(0, newLength - 1) : prev;
});
// Keep focus on input so user can continue selecting
requestAnimationFrame(() => inputRef.current?.focus()); requestAnimationFrame(() => inputRef.current?.focus());
}, [onSelectionChange, selectedParticipants]); }, [onSelectionChange, selectedParticipants, filteredParticipants.length]);
const handleKeyDown = (e: React.KeyboardEvent) => { const handleKeyDown = (e: React.KeyboardEvent) => {
if (!isDropdownOpen || filteredParticipants.length === 0) return; if (!isDropdownOpen || filteredParticipants.length === 0) return;