Fix enter key not submitting dialog

packages/interface/src/components/dialog/CreateLibraryDialog.tsx

@@ -6,9 +6,10 @@ import { PropsWithChildren, useState } from 'react';
 
 export default function CreateLibraryDialog({
 	children,
-	onSubmit
-}: PropsWithChildren<{ onSubmit?: () => void }>) {
-	const [openCreateModal, setOpenCreateModal] = useState(false);
+	onSubmit,
+	open,
+	setOpen
+}: PropsWithChildren<{ onSubmit?: () => void; open: boolean; setOpen: (state: boolean) => void }>) {
 	const [newLibName, setNewLibName] = useState('');
 
 	const queryClient = useQueryClient();
@@ -16,7 +17,7 @@ export default function CreateLibraryDialog({
 		'library.create',
 		{
 			onSuccess: (library: any) => {
-				setOpenCreateModal(false);
+				setOpen(false);
 
 				queryClient.setQueryData(['library.list'], (libraries: any) => [
 					...(libraries || []),
@@ -33,8 +34,8 @@ export default function CreateLibraryDialog({
 
 	return (
 		<Dialog
-			open={openCreateModal}
-			onOpenChange={setOpenCreateModal}
+			open={open}
+			setOpen={setOpen}
 			title="Create New Library"
 			description="Choose a name for your new library, you can configure this and more settings from the library settings later on."
 			ctaAction={() => createLibrary(newLibName)}
@@ -48,6 +49,7 @@ export default function CreateLibraryDialog({
 				value={newLibName}
 				placeholder="My Cool Library"
 				onChange={(e) => setNewLibName(e.target.value)}
+				required
 			/>
 		</Dialog>
 	);

packages/interface/src/components/dialog/DeleteLibraryDialog.tsx

@@ -22,7 +22,7 @@ export default function DeleteLibraryDialog(
 	return (
 		<Dialog
 			open={openDeleteModal}
-			onOpenChange={setOpenDeleteModal}
+			setOpen={setOpenDeleteModal}
 			title="Delete Library"
 			description="Deleting a library will permanently the database, the files themselves will not be deleted."
 			ctaAction={() => {

packages/interface/src/components/layout/Sidebar.tsx

@@ -24,7 +24,7 @@ import {
 } from '@sd/ui';
 import clsx from 'clsx';
 import { CheckCircle, CirclesFour, Planet, ShareNetwork } from 'phosphor-react';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useState } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
 
 import { useOperatingSystem } from '../../hooks/useOperatingSystem';
@@ -38,6 +38,7 @@ export function Sidebar() {
 	const os = useOperatingSystem();
 	const { library, libraries, isLoading: isLoadingLibraries, switchLibrary } = useCurrentLibrary();
 	const debugState = useDebugState();
+	const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
 
 	const { data: isRunningJob } = useLibraryQuery(['jobs.isRunning']);
 
@@ -84,9 +85,9 @@ export function Sidebar() {
 					<Dropdown.Item icon={CogIcon} to="settings/library">
 						Library Settings
 					</Dropdown.Item>
-					<CreateLibraryDialog>
-						<Dropdown.Item icon={PlusIcon}>Add Library</Dropdown.Item>
-					</CreateLibraryDialog>
+					<Dropdown.Item icon={PlusIcon} onClick={() => setIsCreateDialogOpen(true)}>
+						Add Library
+					</Dropdown.Item>
 					<Dropdown.Item icon={LockClosedIcon} onClick={() => alert('TODO: Not implemented yet!')}>
 						Lock
 					</Dropdown.Item>
@@ -142,6 +143,8 @@ export function Sidebar() {
 				</div>
 				{debugState.enabled && <DebugPanel />}
 			</div>
+			{/* Putting this within the dropdown will break the enter click handling in the modal. */}
+			<CreateLibraryDialog open={isCreateDialogOpen} setOpen={setIsCreateDialogOpen} />
 		</div>
 	);
 }

packages/interface/src/components/location/LocationListItem.tsx

@@ -14,6 +14,7 @@ interface LocationListItemProps {
 
 export default function LocationListItem({ location }: LocationListItemProps) {
 	const [hide, setHide] = useState(false);
+	const [open, setOpen] = useState(false);
 
 	const { mutate: locRescan } = useLibraryMutation('locations.fullRescan');
 
@@ -53,6 +54,8 @@ export default function LocationListItem({ location }: LocationListItemProps) {
 					</span>
 				</Button>
 				<Dialog
+					open={open}
+					setOpen={setOpen}
 					title="Delete Location"
 					description="Deleting a location will also remove all files associated with it from the Spacedrive database, the files themselves will not be deleted."
 					ctaAction={() => {

packages/interface/src/components/onboarding/Onboarding.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { useState } from 'react';
 import { useNavigate } from 'react-router';
 
 import { Button } from '../../../../ui/src';
@@ -9,6 +10,7 @@ import CreateLibraryDialog from '../dialog/CreateLibraryDialog';
 export default function OnboardingPage() {
 	const os = useOperatingSystem();
 	const navigate = useNavigate();
+	const [open, setOpen] = useState(false);
 
 	return (
 		<div
@@ -19,7 +21,7 @@ export default function OnboardingPage() {
 		>
 			<h1 className="text-red-500">Welcome to Spacedrive</h1>
 
-			<CreateLibraryDialog onSubmit={() => navigate('/overview')}>
+			<CreateLibraryDialog open={open} setOpen={setOpen} onSubmit={() => navigate('/overview')}>
 				<Button variant="accent" size="sm">
 					Create your library
 				</Button>

packages/interface/src/screens/settings/library/TagsSettings.tsx

@@ -14,6 +14,7 @@ import { SettingsHeader } from '../../../components/settings/SettingsHeader';
 
 export default function TagsSettings() {
 	const [openCreateModal, setOpenCreateModal] = useState(false);
+	const [openDeleteModal, setOpenDeleteModal] = useState(false);
 	// creating new tag state
 	const [newColor, setNewColor] = useState('#A717D9');
 	const [newName, setNewName] = useState('');
@@ -69,7 +70,7 @@ export default function TagsSettings() {
 					<div className="flex-row space-x-2">
 						<Dialog
 							open={openCreateModal}
-							onOpenChange={setOpenCreateModal}
+							setOpen={setOpenCreateModal}
 							title="Create New Tag"
 							description="Choose a name and color."
 							ctaAction={() => {
@@ -150,6 +151,8 @@ export default function TagsSettings() {
 						</div>
 						<div className="flex flex-grow" />
 						<Dialog
+							open={openDeleteModal}
+							setOpen={setOpenDeleteModal}
 							title="Delete Tag"
 							description="Are you sure you want to delete this tag? This cannot be undone and tagged files will be unlinked."
 							ctaAction={() => {

packages/interface/src/screens/settings/node/LibrariesSettings.tsx

@@ -42,6 +42,7 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) {
 
 export default function LibrarySettings() {
 	const { data: libraries } = useBridgeQuery(['library.list']);
+	const [open, setOpen] = useState(false);
 
 	return (
 		<SettingsContainer>
@@ -50,7 +51,7 @@ export default function LibrarySettings() {
 				description="The database contains all library data and file metadata."
 				rightArea={
 					<div className="flex-row space-x-2">
-						<CreateLibraryDialog>
+						<CreateLibraryDialog open={open} setOpen={setOpen}>
 							<Button variant="accent" size="sm">
 								Add Library
 							</Button>

packages/ui/src/Dialog.tsx

@@ -1,11 +1,13 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import clsx from 'clsx';
 import { ReactNode, useState } from 'react';
-import { animated, config, useTransition } from 'react-spring';
+import { animated, useTransition } from 'react-spring';
 
 import { Button, Loader } from '../';
 
 export interface DialogProps extends DialogPrimitive.DialogProps {
+	open: boolean;
+	setOpen: (open: boolean) => void;
 	trigger: ReactNode;
 	ctaLabel?: string;
 	ctaDanger?: boolean;
@@ -18,9 +20,7 @@ export interface DialogProps extends DialogPrimitive.DialogProps {
 	submitDisabled?: boolean;
 }
 
-export function Dialog(props: DialogProps) {
-	const [open, setOpen] = useState(false);
-
+export function Dialog({ open, setOpen: onOpenChange, ...props }: DialogProps) {
 	const transitions = useTransition(open, {
 		from: {
 			opacity: 0,
@@ -33,7 +33,7 @@ export function Dialog(props: DialogProps) {
 	});
 
 	return (
-		<DialogPrimitive.Root open={open} onOpenChange={setOpen}>
+		<DialogPrimitive.Root open={open} setOpen={onOpenChange}>
 			<DialogPrimitive.Trigger asChild>{props.trigger}</DialogPrimitive.Trigger>
 			{transitions(
 				(styles, show) =>
@@ -51,7 +51,12 @@ export function Dialog(props: DialogProps) {
 											style={styles}
 											className="min-w-[300px] max-w-[400px] rounded-md bg-app-box border border-app-line text-ink shadow-app-shade"
 										>
-											<form onSubmit={(e) => e.preventDefault()}>
+											<form
+												onSubmit={(e) => {
+													e.preventDefault();
+													if (props.ctaAction) props.ctaAction();
+												}}
+											>
 												<div className="p-5">
 													<DialogPrimitive.Title className="mb-2 font-bold">
 														{props.title}
@@ -70,7 +75,6 @@ export function Dialog(props: DialogProps) {
 														</Button>
 													</DialogPrimitive.Close>
 													<Button
-														onClick={props.ctaAction}
 														type="submit"
 														size="sm"
 														disabled={props.loading || props.submitDisabled}