🐛 Create & edit modals not autofocusing first input

components/starRoles/RoleModal.tsx → components/starRoles/StarRoleModal.tsx

@@ -9,28 +9,24 @@ import {
 	IonTitle,
 	IonToolbar,
 } from '@ionic/react'
-import { ComponentProps, ReactNode, useEffect, useRef } from 'react'
+import { ComponentProps, MutableRefObject, ReactNode } from 'react'
 import { StarRole } from '../db'
 
 export default function StarRoleModal({
 	dismiss,
 	title,
+	titleInput,
 	starRole = {},
 	toolbarSlot,
 	...props
 }: {
 	dismiss: (data?: any, role?: string) => void
 	title: string
 	starRole?: Partial<StarRole>
+	titleInput: MutableRefObject<HTMLIonInputElement | null>
 	toolbarSlot?: ReactNode
 } & ComponentProps<typeof IonPage>) {
-	const input = useRef<HTMLIonInputElement>(null)
-
-	// Might cause problems that this runs on every render but seems fine atm...
-	useEffect(() => {
-		input.current?.setFocus()
-	})
-
+	console.log('RENDER')
 	return (
 		<IonPage
 			{...props}
@@ -40,7 +36,7 @@ export default function StarRoleModal({
 					dismiss(
 						{
 							...starRole,
-							title: input.current?.value,
+							title: titleInput.current?.value,
 						},
 						'confirm',
 					)
@@ -55,8 +51,9 @@ export default function StarRoleModal({
 			</IonHeader>
 			<IonContent className="space-y-4 ion-padding">
 				<IonInput
+					autofocus
 					fill="outline"
-					ref={input}
+					ref={titleInput}
 					type="text"
 					label="Title"
 					labelPlacement="floating"
@@ -79,7 +76,7 @@ export default function StarRoleModal({
 								dismiss(
 									{
 										...starRole,
-										title: input.current?.value,
+										title: titleInput.current?.value,
 									},
 									'confirm',
 								)

components/starRoles/create/modal.tsx

@@ -1,12 +1,12 @@
-import StarRoleModal from '../RoleModal'
+import { ComponentProps } from 'react'
+import StarRoleModal from '../StarRoleModal'
 
 export function CreateStarRoleModal({
 	dismiss,
-	title,
+	...props
 }: {
 	dismiss: (data?: any, role?: string) => void
-	title: string
-}) {
+} & ComponentProps<typeof StarRoleModal>) {
 	return (
 		<StarRoleModal
 			dismiss={(data?: any, role?: string) => {
@@ -17,7 +17,7 @@ export function CreateStarRoleModal({
 					role,
 				)
 			}}
-			title={title}
+			{...props}
 		/>
 	)
 }

components/starRoles/create/useCreateStarRoleModal.ts

@@ -1,6 +1,6 @@
 import { useIonModal } from '@ionic/react'
 import { HookOverlayOptions } from '@ionic/react/dist/types/hooks/HookOverlayOptions'
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import { db } from '../../db'
 import { CreateStarRoleModal } from './modal'
 
@@ -12,18 +12,22 @@ export function useCreateStarRoleModal(): [
 	}) => void,
 	(data?: any, role?: string) => void,
 ] {
+	const titleInput = useRef<HTMLIonInputElement>(null)
 	const [present, dismiss] = useIonModal(CreateStarRoleModal, {
 		dismiss: (data: string, role: string) => dismiss(data, role),
 		title: 'Create star role',
+		titleInput,
 	})
-
 	const createStarRole = useCallback(async ({ title }: { title: any }) => {
 		db.starRoles.add({ title })
 	}, [])
 
 	return [
 		({ onWillDismiss }: HookOverlayOptions) => {
 			present({
+				onDidPresent: _event => {
+					titleInput.current?.setFocus()
+				},
 				onWillDismiss: event => {
 					if (event.detail.role === 'confirm') {
 						const { starRole } = event.detail.data

components/starRoles/edit/modal.tsx

@@ -1,15 +1,12 @@
-import { StarRole } from '../../db'
-import StarRoleModal from '../RoleModal'
+import { ComponentProps } from 'react'
+import StarRoleModal from '../StarRoleModal'
 
 export function EditStarRoleModal({
 	dismiss,
-	starRole,
-	title,
+	...props
 }: {
 	dismiss: (data?: any, role?: string) => void
-	starRole: StarRole
-	title: string
-}) {
+} & ComponentProps<typeof StarRoleModal>) {
 	return (
 		<StarRoleModal
 			dismiss={(data?: any, role?: string) => {
@@ -20,8 +17,7 @@ export function EditStarRoleModal({
 					role,
 				)
 			}}
-			starRole={starRole}
-			title={title}
+			{...props}
 		/>
 	)
 }

components/starRoles/edit/useEditStarRoleModal.ts

@@ -1,5 +1,5 @@
 import { useIonModal } from '@ionic/react'
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { StarRole, db } from '../../db'
 import { EditStarRoleModal } from './modal'
 
@@ -8,10 +8,12 @@ export function useEditStarRoleModal(): [
 	(data?: any, role?: string) => void,
 ] {
 	const [starRole, setStarRole] = useState<StarRole | null>(null)
+	const titleInput = useRef<HTMLIonInputElement>(null)
 	const [present, dismiss] = useIonModal(EditStarRoleModal, {
 		dismiss: (data: string, role: string) => dismiss(data, role),
 		starRole,
 		title: 'Edit star role',
+		titleInput,
 	})
 
 	const editStarRole = useCallback(async (updatedStarRole: StarRole) => {
@@ -23,6 +25,9 @@ export function useEditStarRoleModal(): [
 	return [
 		(starRole: StarRole) => {
 			present({
+				onDidPresent: _event => {
+					titleInput.current?.setFocus()
+				},
 				onWillPresent: () => {
 					setStarRole(starRole)
 				},

components/todos/TodoModal.tsx

@@ -16,6 +16,7 @@ import {
 import { openOutline } from 'ionicons/icons'
 import {
 	ComponentProps,
+	MutableRefObject,
 	ReactNode,
 	useCallback,
 	useEffect,
@@ -28,26 +29,22 @@ import { useLiveQuery } from 'dexie-react-hooks'
 export default function TodoModal({
 	dismiss,
 	title,
+	titleInput,
 	todo = {},
 	toolbarSlot,
 	...props
 }: {
 	dismiss: (data?: any, role?: string) => void
 	title: string
+	titleInput: MutableRefObject<HTMLIonInputElement | null>
 	todo?: Partial<Todo>
 	toolbarSlot?: ReactNode
 } & ComponentProps<typeof IonPage>) {
 	const noteInput = useRef<HTMLIonTextareaElement>(null)
 	const starRoleInput = useRef<HTMLIonSelectElement>(null)
-	const titleInput = useRef<HTMLIonInputElement>(null)
 
 	const starRoles = useLiveQuery(() => db.starRoles.toArray(), [], [])
 
-	// Might cause problems that this runs on every render but seems fine atm...
-	useEffect(() => {
-		titleInput.current?.setFocus()
-	})
-
 	const noteProvider = useNoteProvider()
 	const emitTodo = useCallback(() => {
 		dismiss(
@@ -59,7 +56,7 @@ export default function TodoModal({
 			},
 			'confirm',
 		)
-	}, [dismiss, todo])
+	}, [dismiss, todo, titleInput])
 
 	return (
 		<IonPage
@@ -79,7 +76,6 @@ export default function TodoModal({
 			</IonHeader>
 			<IonContent className="space-y-4 ion-padding">
 				<IonInput
-					autoFocus
 					fill="outline"
 					ref={titleInput}
 					type="text"

components/todos/create/modal.tsx

@@ -1,17 +1,16 @@
 import { IonSelect, IonSelectOption, useIonModal } from '@ionic/react'
 import { HookOverlayOptions } from '@ionic/react/dist/types/hooks/HookOverlayOptions'
-import { useCallback, useRef } from 'react'
+import { ComponentProps, useCallback, useRef } from 'react'
 import { db, ListType } from '../../db'
 import useNoteProvider from '../../notes/useNoteProvider'
 import TodoModal from '../TodoModal'
 
 export function CreateTodoModal({
 	dismiss,
-	title,
+	...props
 }: {
 	dismiss: (data?: any, role?: string) => void
-	title: string
-}) {
+} & ComponentProps<typeof TodoModal>) {
 	const locationSelect = useRef<HTMLIonSelectElement>(null)
 
 	return (
@@ -35,7 +34,6 @@ export function CreateTodoModal({
 					locationSelect.current!.value = ListType.icebox
 				}
 			}}
-			title={title}
 			toolbarSlot={
 				<IonSelect
 					className="p-2"
@@ -50,6 +48,7 @@ export function CreateTodoModal({
 					</IonSelectOption>
 				</IonSelect>
 			}
+			{...props}
 		/>
 	)
 }

components/todos/create/useCreateTodoModal.ts

@@ -1,6 +1,6 @@
 import { useIonModal } from '@ionic/react'
 import { HookOverlayOptions } from '@ionic/react/dist/types/hooks/HookOverlayOptions'
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import { db, ListType, Todo } from '../../db'
 import useNoteProvider from '../../notes/useNoteProvider'
 import { CreateTodoModal } from './modal'
@@ -13,9 +13,11 @@ export function useCreateTodoModal(): [
 	}) => void,
 	(data?: any, role?: string) => void,
 ] {
+	const titleInput = useRef<HTMLIonInputElement>(null)
 	const [present, dismiss] = useIonModal(CreateTodoModal, {
 		dismiss: (data: string, role: string) => dismiss(data, role),
 		title: 'Create todo',
+		titleInput,
 	})
 
 	const noteProvider = useNoteProvider()
@@ -48,6 +50,9 @@ export function useCreateTodoModal(): [
 	return [
 		({ onWillDismiss }: HookOverlayOptions) => {
 			present({
+				onDidPresent: _event => {
+					titleInput.current?.setFocus()
+				},
 				onWillDismiss: event => {
 					if (event.detail.role === 'confirm') {
 						const { todo, location } = event.detail.data

components/todos/edit/modal.tsx

@@ -1,24 +1,6 @@
-import { useIonModal } from '@ionic/react'
-import { useCallback } from 'react'
-import { Todo, db } from '../../db'
-import useNoteProvider from '../../notes/useNoteProvider'
-import useSelectedTodo from '../SelectedTodo'
+import { ComponentProps } from 'react'
 import TodoModal from '../TodoModal'
 
-export function EditTodoModal({
-	dismiss,
-	title,
-	todo,
-}: {
-	dismiss: (data?: any, role?: string) => void
-	title: string
-	todo: Todo
-}) {
-	return (
-		<TodoModal
-			title={title}
-			todo={todo}
-			dismiss={dismiss}
-		/>
-	)
+export function EditTodoModal({ ...props }: ComponentProps<typeof TodoModal>) {
+	return <TodoModal {...props} />
 }

components/todos/edit/useEditTodoModal.ts

@@ -1,5 +1,5 @@
 import { useIonModal } from '@ionic/react'
-import { useCallback } from 'react'
+import { useCallback, useRef } from 'react'
 import { Todo, db } from '../../db'
 import useNoteProvider from '../../notes/useNoteProvider'
 import useSelectedTodo from '../SelectedTodo'
@@ -10,9 +10,11 @@ export function useEditTodoModal(): [
 	(data?: any, role?: string) => void,
 ] {
 	const [todo, setTodo] = useSelectedTodo()
+	const titleInput = useRef<HTMLIonInputElement>(null)
 	const [present, dismiss] = useIonModal(EditTodoModal, {
 		dismiss: (data: string, role: string) => dismiss(data, role),
 		title: 'Edit todo',
+		titleInput,
 		todo,
 	})
 	const noteProvider = useNoteProvider()
@@ -37,6 +39,9 @@ export function useEditTodoModal(): [
 	return [
 		(todo: Todo) => {
 			present({
+				onDidPresent: _event => {
+					titleInput.current?.setFocus()
+				},
 				onWillPresent: () => {
 					setTodo(todo)
 				},