UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-03-10 06:00:19 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add click outside handler to close ModelSelector dropdown

Browse Source
This commit is contained in:
Kamil Furtak 2025-02-15 16:59:58 +01:00
parent 2056625cbd
commit e717d25191
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/chat/ModelSelector.tsx
View File

@ -30,6 +30,20 @@ export const ModelSelector = ({
const [focusedIndex, setFocusedIndex] = useState(-1); const [focusedIndex, setFocusedIndex] = useState(-1);
const searchInputRef = useRef<HTMLInputElement>(null); const searchInputRef = useRef<HTMLInputElement>(null);
const optionsRef = useRef<(HTMLDivElement | null)[]>([]); const optionsRef = useRef<(HTMLDivElement | null)[]>([]);
const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setIsModelDropdownOpen(false);
setModelSearchQuery('');
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
// Filter models based on search query // Filter models based on search query
const filteredModels = [...modelList] const filteredModels = [...modelList]
@ -176,7 +190,7 @@ export const ModelSelector = ({
))} ))}
</select> </select>
<div className="relative flex-1 lg:max-w-[70%]" onKeyDown={handleKeyDown}> <div className="relative flex-1 lg:max-w-[70%]" onKeyDown={handleKeyDown} ref={dropdownRef}>
<div <div
className={classNames( className={classNames(
'w-full p-2 rounded-lg border border-bolt-elements-borderColor', 'w-full p-2 rounded-lg border border-bolt-elements-borderColor',