Merge pull request #1268 from aaron-seq/fix/move-open-reset-effects-to-onOpenChange

fix(dialogs): move open-reset effects into onOpenChange handlers
This commit is contained in:
Rohan Verma 2026-04-20 20:58:27 -07:00 committed by GitHub
commit 6bd4ffb98e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 29 additions and 20 deletions

View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useRef, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@ -29,12 +29,16 @@ export function CreateFolderDialog({
const [name, setName] = useState(""); const [name, setName] = useState("");
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => { const handleOpenChange = useCallback(
if (open) { (next: boolean) => {
setName(""); if (next) {
setTimeout(() => inputRef.current?.focus(), 0); setName("");
} setTimeout(() => inputRef.current?.focus(), 0);
}, [open]); }
onOpenChange(next);
},
[onOpenChange]
);
const handleSubmit = useCallback( const handleSubmit = useCallback(
(e?: React.FormEvent) => { (e?: React.FormEvent) => {
@ -50,7 +54,7 @@ export function CreateFolderDialog({
const isSubfolder = !!parentFolderName; const isSubfolder = !!parentFolderName;
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none"> <DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
<DialogHeader className="space-y-2 pb-2"> <DialogHeader className="space-y-2 pb-2">
<div className="flex items-center gap-2 sm:gap-3"> <div className="flex items-center gap-2 sm:gap-3">

View file

@ -1,7 +1,7 @@
"use client"; "use client";
import { ChevronDown, ChevronRight, Folder, FolderOpen, Home } from "lucide-react"; import { ChevronDown, ChevronRight, Folder, FolderOpen, Home } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@ -36,12 +36,16 @@ export function FolderPickerDialog({
const [selectedId, setSelectedId] = useState<number | null>(null); const [selectedId, setSelectedId] = useState<number | null>(null);
const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set()); const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
useEffect(() => { const handleOpenChange = useCallback(
if (open) { (next: boolean) => {
setSelectedId(null); if (next) {
setExpandedIds(new Set()); setSelectedId(null);
} setExpandedIds(new Set());
}, [open]); }
onOpenChange(next);
},
[onOpenChange]
);
const foldersByParent = useMemo(() => { const foldersByParent = useMemo(() => {
const map: Record<string, FolderDisplay[]> = {}; const map: Record<string, FolderDisplay[]> = {};
@ -123,7 +127,7 @@ export function FolderPickerDialog({
} }
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none"> <DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
<DialogHeader className="space-y-2 pb-2"> <DialogHeader className="space-y-2 pb-2">
<div className="flex items-center gap-2 sm:gap-3"> <div className="flex items-center gap-2 sm:gap-3">

View file

@ -27,13 +27,14 @@ export function FreeModelSelector({ className }: { className?: string }) {
anonymousChatApiService.getModels().then(setModels).catch(console.error); anonymousChatApiService.getModels().then(setModels).catch(console.error);
}, []); }, []);
useEffect(() => { const handleOpenChange = useCallback((next: boolean) => {
if (open) { if (next) {
setSearchQuery(""); setSearchQuery("");
setFocusedIndex(-1); setFocusedIndex(-1);
requestAnimationFrame(() => searchInputRef.current?.focus()); requestAnimationFrame(() => searchInputRef.current?.focus());
} }
}, [open]); setOpen(next);
}, []);
const currentModel = useMemo( const currentModel = useMemo(
() => models.find((m) => m.seo_slug === currentSlug) ?? null, () => models.find((m) => m.seo_slug === currentSlug) ?? null,
@ -94,7 +95,7 @@ export function FreeModelSelector({ className }: { className?: string }) {
); );
return ( return (
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={handleOpenChange}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
variant="ghost" variant="ghost"