fix: use Select value instead of defaultValue
when defaultValue is used to pass the current value of Select, a warning is produced in the console: "cannot update a component while rendering a different component `Controller`". an unrelated issue (https://github.com/shadcn-ui/ui/issues/1253) that suggested using the value prop instead of defaultValue somehow fixed this problem
This commit is contained in:
@@ -29,6 +29,7 @@ import {
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { LoadingSpinner } from "@/components/ui/loading-spinner";
|
||||
import type { BaseTemplate } from "./types";
|
||||
|
||||
const NewTemplateForm = object({
|
||||
baseTemplate: nonempty(string()),
|
||||
@@ -45,12 +46,34 @@ function NewTemplateDialog() {
|
||||
Create a new template for workspaces
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<TemplateForm />
|
||||
<TemplateFormContainer />
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
function TemplateForm() {
|
||||
function TemplateFormContainer() {
|
||||
const { data: baseTemplates, isLoading, error } = useBaseTemplates();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="w-full flex items-center justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !baseTemplates) {
|
||||
return (
|
||||
<p className="opacity-80">
|
||||
An error occurred when fetching available options.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return <TemplateForm baseTemplates={baseTemplates} />;
|
||||
}
|
||||
|
||||
function TemplateForm({ baseTemplates }: { baseTemplates: BaseTemplate[] }) {
|
||||
const router = useRouter();
|
||||
const { createTemplate, isCreatingTemplate } = useCreateTemplate();
|
||||
const form = useForm({
|
||||
@@ -74,24 +97,6 @@ function TemplateForm() {
|
||||
}
|
||||
}
|
||||
|
||||
const { data: baseTemplates, isLoading, error } = useBaseTemplates();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="w-full flex items-center justify-center">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !baseTemplates) {
|
||||
return (
|
||||
<p className="opacity-80">
|
||||
An error occurred when fetching available options.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
@@ -101,7 +106,7 @@ function TemplateForm() {
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Base template</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a base template" />
|
||||
|
@@ -34,6 +34,8 @@ import {
|
||||
useTemplateEditorStore,
|
||||
} from "./template-editor-store";
|
||||
import type { Template } from "./types";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { ToastAction } from "@/components/ui/toast";
|
||||
|
||||
function TemplateEditor() {
|
||||
const { templateName, _splat } = templateEditorRoute.useParams();
|
||||
@@ -134,7 +136,18 @@ function Editor() {
|
||||
error,
|
||||
} = useTemplateFile(templateName, currentPath);
|
||||
const saveTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const { updateTemplateFile } = useUpdateTemplateFile(templateName);
|
||||
const { updateTemplateFile, error: updateError } =
|
||||
useUpdateTemplateFile(templateName);
|
||||
const { toast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
if (updateError) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Failed to save template",
|
||||
});
|
||||
}
|
||||
}, [updateError, toast]);
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
|
@@ -192,7 +192,7 @@ function NewWorkspaceForm({
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Image for this workspace</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an image" />
|
||||
@@ -217,7 +217,7 @@ function NewWorkspaceForm({
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Docker runtime</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a Docker runtime" />
|
||||
|
Reference in New Issue
Block a user