added focus on input when form visible

billybillydev · Jul 18, 2024 · bfbfaa1 · bfbfaa1
1 parent bbe4e19
commit bfbfaa1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/src/components/auth.component.tsx b/src/components/auth.component.tsx
@@ -6,7 +6,7 @@ export function LoginForm() {
   return (
     <form hx-post="/api/auth/login" hx-target-500={`#${errorLoginId}`} hx-target-4xx={`#${errorLoginId}`}>
       <p class="text-red-500 text-center text-lg" id={errorLoginId} />
-      <FormField fieldName="email" type="email" />
+      <FormField fieldName="email" type="email" focus />
       <FormField fieldName="password" type="password" />
       <PrimaryButton text="Log In" />
     </form>
@@ -23,7 +23,7 @@ export function RegisterForm() {
       hx-target="main"
     >
       <p class="text-red-500 text-center text-lg" id={errorRegisterId} />
-      <FormField fieldName="name" />
+      <FormField fieldName="name" focus />
       <FormField fieldName="email" type="email" />
       <FormField fieldName="password" type="password" />
       <PrimaryButton text="Submit" />

diff --git a/src/components/fields.component.tsx b/src/components/fields.component.tsx
@@ -1,12 +1,14 @@
 export type FormFieldProps = JSX.HtmlInputTag & {
   fieldName: string;
+  focus?: boolean;
 };
 
 export function FormField({
   fieldName,
   type,
   value,
   class: className,
+  focus,
   ...rest
 }: FormFieldProps) {
   const classes = [
@@ -25,6 +27,7 @@ export function FormField({
         type={type || "text"}
         value={value || ""}
         required="true"
+        x-init={focus ? `$el.focus()` : null}
         {...rest}
       />
     </div>

diff --git a/src/components/habits.component.tsx b/src/components/habits.component.tsx
@@ -5,7 +5,10 @@ import {
   SecondaryButton,
 } from "$components/buttons.component";
 import { FormField } from "$components/fields.component";
-import { Notification, notificationListId } from "$components/notifications.component";
+import {
+  Notification,
+  notificationListId,
+} from "$components/notifications.component";
 import { LimitPaginationRadio } from "$components/pagination.component";
 import { Habit } from "$db/models";
 import { generateDatesByNumberOfDays } from "$lib";
@@ -36,7 +39,7 @@ export function CreateHabitForm() {
       class={"flex flex-col gap-y-4 border p-8 rounded-xl max-w-3xl mx-auto"}
     >
       <div class={"flex items-center gap-x-8 w-full"}>
-        <FormField class="w-2/3" fieldName="title" />
+        <FormField class="w-2/3" fieldName="title" focus />
         <FormField class="w-1/3" fieldName="color" type="color" />
       </div>
       <FormField fieldName="description" />
@@ -89,7 +92,7 @@ export function EditHabitForm({
       `}
       class={"flex flex-col gap-y-4 border p-8 rounded-xl w-full mx-auto"}
     >
-      <FormField fieldName="title" value={title} />
+      <FormField fieldName="title" value={title} focus />
       <FormField fieldName="description" value={description} />
       <p class="text-red-500 p-2 text-center" id={editHabitErrorMessageId} />
       <div class={"flex items-center justify-center gap-x-8"}>
@@ -110,7 +113,7 @@ export function CreateHabitButton() {
       class={
         "p-4 text-center border rounded-xl hover:bg-slate-300 hover:text-slate-700 w-full md:w-3/4 mx-auto text-3xl flex gap-x-4 items-center justify-center"
       }
-      x-on:click="showForm = true"
+      x-on:click={"showForm = true"}
     >
       <span>Add Habit</span>
       <span
@@ -127,12 +130,12 @@ export function CreateHabitButton() {
 export function CreateHabitComponent() {
   return (
     <div x-data="{ showForm: false }">
-      <div x-show="!showForm">
+      <template x-if="!showForm">
         <CreateHabitButton />
-      </div>
-      <div x-show="showForm">
+      </template>
+      <template x-if="showForm">
         <CreateHabitForm />
-      </div>
+      </template>
     </div>
   );
 }

diff --git a/src/components/modals.component.tsx b/src/components/modals.component.tsx
@@ -1,5 +1,4 @@
 import { EditHabitForm, EditHabitProps } from "$components/habits.component";
-import { Habit } from "$db/models";
 
 export type ModalProps = { children: JSX.Element | JSX.Element[]; ref: string };