web/src/components/forms/InstructionElement.tsx

@@ -64,8 +64,8 @@ export default function InstructionElement({ instruction, index, allowDelete, on
           <DragIconSmall />
         </div>
 
-        <button
+        <button 
-          tabIndex={-1}
+          tabIndex={-1} 
           disabled={!allowDelete}
           onClick={() => onDelete(instruction.id)}
           className="p-2 pr-0 cursor-pointer text-gray-500 hover:text-red-500 disabled:text-gray-200 disabled:cursor-not-allowed duration-300"

web/src/components/forms/InstructionForm.tsx

@@ -18,7 +18,7 @@ export default function InstructionForm({ instructions, setInstructions }: Instr
   };
 
   const handleDelete = (id: string) => {
-    setInstructions(prev =>
+    setInstructions(prev => 
       prev.filter(instr => instr.id !== id)
     );
   }

web/src/components/forms/ValidationErrorList.tsx

@@ -1,34 +0,0 @@
-import type { CreateRecipeFormToggles } from "../../pages/Create";
-
-interface ValidationErrorListProps {
-  validation: CreateRecipeFormToggles;
-}
-
-const MESSAGES: Record<keyof CreateRecipeFormToggles, string> = {
-  title: "Invalid title provided.",
-  description: "Invalid description provided.",
-  prepTime: "Invalid preparation time provided.",
-  cookTime: "Invalid cook time provided.",
-  servingSize: "Invalid serving size provided.",
-  category: "Invalid category selected.",
-  difficulty: "Invalid difficulty selected.",
-  ingredients: "Invalid ingredients provided.",
-  instructions: "Invalid instructions provided.",
-}
-
-export default function ValidationErrorList({ validation }: ValidationErrorListProps) {
-  return (
-    <div className="my-2">
-      {Object.entries(validation)
-        .filter(([, isValid]) => !isValid)
-        .map(([name]) => {
-          const key = name as keyof CreateRecipeFormToggles;
-          return (
-            <p key={name} className="text-sm text-red-500">
-              {MESSAGES[key]}
-            </p>
-          );
-        })}
-    </div>
-  );
-}

web/src/pages/Create.tsx

@@ -1,8 +1,7 @@
-import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
+import { useEffect, useState } from "react";
 import Banner from "../components/Banner";
 import { isRecipeMeal } from "../types/recipe";
 import InstructionForm from "../components/forms/InstructionForm";
-import ValidationErrorList from "../components/forms/ValidationErrorList";
 
 interface CreateRecipeForm {
   title: string;
@@ -19,7 +18,7 @@ interface CreateRecipeForm {
   image: File | null;
 };
 
-export interface CreateRecipeFormToggles {
+interface CreateRecipeFormToggles {
   title: boolean;
   description: boolean;
   prepTime: boolean;
@@ -104,7 +103,16 @@ export default function Create() {
 
 
   // HANDLERS
-  const changeHandler = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+  // TODO: Only needed if we use the form element
+  const keyDownHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      return false;
+    }
+    return true;
+  }
+
+  const changeHandler = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
     const { name, value } = e.target;
     setInputs(prev => ({
       ...prev,
@@ -116,48 +124,15 @@ export default function Create() {
     }));
   };
 
-  const tagCreationHandler = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    // why would anyone try this lol
-    if (inputs.tagInput.trim() === "") return;
-
-    // Tag already exists, clear input and exit
-    if (inputs.tags.includes(inputs.tagInput.toLowerCase())) {
-      setInputs(prev => ({
-        ...prev,
-        tagInput: "",
-      }));
-
-      return;
-    }
-
-    setInputs(prev => ({
-      ...prev,
-      tags: [...prev.tags, inputs.tagInput.toLowerCase()],
-      tagInput: "",
-    }));
-  }
-
-  const tagDeletionHandler = (tag: string) => {
-    if (!tag) return;
-
-    setInputs(prev => ({
-      ...prev,
-      tags: prev.tags.filter(t => t !== tag)
-    }));
-  }
-
   const addInstructionHandler = () => {
     setInstructions([...instructions, { id: crypto.randomUUID(), content: "" }]);
   }
 
-
   // EFFECTS 
   useEffect(() => {
     // Execute validation every time inputs change
     validate();
-    console.log("@inputs", inputs);
+    // console.log("@inputs", inputs);
   }, [inputs, instructions]);
 
   // useEffect(() => {
@@ -200,6 +175,7 @@ export default function Create() {
               Please provide a unique title for your recipe. This is the most important part!
             </p>
             <input
+              onKeyDown={keyDownHandler}
               className={`${!validation.title ? "border-red-500" : ""} ${INPUT_CLASSES}`}
               type="text"
               name="title"
@@ -243,7 +219,7 @@ export default function Create() {
           </div>
 
           {/* TODO: Tags Input */}
-          <form onSubmit={tagCreationHandler} className="my-4 flex flex-col gap-x-2">
+          <div className="my-4 flex flex-col gap-x-2">
             <div className="flex flex-col flex-grow">
               <label htmlFor="tags" className="text-sm">
                 Recipe Tags
@@ -252,30 +228,19 @@ export default function Create() {
                 Please provide a list of tags. <span className="italic">e.g., easy, dairy-free, gluten-free, high protein.</span>
               </p>
               <input
-                type="text"
+                onKeyDown={keyDownHandler}
-                value={inputs.tagInput}
+                className="border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm"
-                onChange={changeHandler}
-                name="tagInput"
                 maxLength={32}
                 enterKeyHint="done"
+                type="text"
+                id="tag"
+                name="tag"
                 placeholder="e.g., Healthy"
-                className="border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm"
               />
               <input type="hidden" name="tags" id="tags" value="" />
             </div>
-            <ul id="tag-list" className="my-2 flex gap-1 flex-wrap">
+            <ul id="tag-list" className="my-2 flex gap-1 flex-wrap"></ul>
-              {inputs.tags.map(tag =>
+          </div>
-                <li
-                  className="flex text-xs items-center bg-blue-100 w-fit px-2 py-1 rounded-full gap-x-1 select-none cursor-pointer hover:bg-blue-200 duration-300"
-                  key={tag}
-                >
-                  <button tabIndex={-1} type="button" onClick={() => tagDeletionHandler(tag)}>
-                    &times; {tag}
-                  </button>
-                </li>
-              )}
-            </ul>
-          </form>
 
           {/* Time Input */}
           <div className="my-4 flex gap-x-2">
@@ -288,6 +253,7 @@ export default function Create() {
                 Please provide the estimated prep time (minutes).
               </p>
               <input
+                onKeyDown={keyDownHandler}
                 className={`${!validation.prepTime ? "border-red-500" : ""} ${INPUT_CLASSES}`}
                 type="number"
                 name="prepTime"
@@ -311,6 +277,7 @@ export default function Create() {
                 Please provide the estimated cook time (minutes).
               </p>
               <input
+                onKeyDown={keyDownHandler}
                 className={`${!validation.cookTime ? "border-red-500" : ""} ${INPUT_CLASSES}`}
                 type="number"
                 name="cookTime"
@@ -334,6 +301,7 @@ export default function Create() {
                 Please provide the estimated serving size.
               </p>
               <input
+                onKeyDown={keyDownHandler}
                 className={`${!validation.servingSize ? "border-red-500" : ""} ${INPUT_CLASSES}`}
                 type="number"
                 name="servingSize"
@@ -419,6 +387,7 @@ export default function Create() {
               <li className="w-full flex gap-x-2 py-2">
                 <div className="flex-grow">
                   <input
+                    onKeyDown={keyDownHandler}
                     className="peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none 
                 focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm
                 invalid:border-red-500"
@@ -435,6 +404,7 @@ export default function Create() {
                 </div>
                 <div className="w-1/3">
                   <input
+                    onKeyDown={keyDownHandler}
                     className="peer w-full border border-gray-300 px-4 py-2 rounded-lg focus:outline-none 
                 focus:ring-blue-500 focus:ring-2 duration-200 ease-in-out transition-all shadow-sm
                 invalid:border-red-500"
@@ -459,6 +429,7 @@ export default function Create() {
             </button>
           </div>
 
+          {/* TODO: Instructions Inputs */}
           <div className="flex flex-col my-4">
             <label htmlFor="instructions" className="text-sm">
               Instructions
@@ -495,10 +466,7 @@ export default function Create() {
             />
           </div>
 
-          {/* Display the reason for the invalidation */}
+          <button disabled={!isFormValid} className={`${isFormValid ? "bg-gradient-to-r from-blue-200 to-purple-200 cursor-pointer" : "bg-gray-200 text-gray-500 cursor-not-allowed"} w-full mt-8  py-2 rounded-lg text-lg shadow-md`}>
-          <ValidationErrorList validation={validation} />
-
-          <button disabled={!isFormValid} className={`${isFormValid ? "bg-gradient-to-r from-blue-200 to-purple-200 cursor-pointer" : "bg-gray-200 text-gray-500 cursor-not-allowed"} w-full py-2 rounded-lg text-lg shadow-md`}>
             Create Recipe
           </button>
         </div>