src/pages/recipe/new.astro

@@ -42,7 +42,7 @@ async function submitRecipe() {
 
             <div class="flex flex-row align-middle items-center">
                 <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
-                <button class="hidden ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
+                <button disabled class="disabled:text-white/20 ml-auto mt-5 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-ingredient-btn" >Add</button>
             </div>
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                 <thead>

src/script/newRecipe.ts

@@ -23,13 +23,19 @@ document.addEventListener('DOMContentLoaded', function() {
         document.querySelector('#ing-name')!
     )
     
-    // show plus button once the user clicks off one of the text fields
-    ingredientFields.forEach(f => f.addEventListener('beforeinput', showAddIngredientButton))
+    // show plus button once the user types in the text fields
+    ingredientFields.forEach(f => {
+        f.addEventListener('input', showAddIngredientButton)
+        f.addEventListener('keyup', showAddIngredientButton)
+    })
     // onclick for add button
     document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
     // for pressing enter to reset cursor
     ingredientFields[2].addEventListener('keyup', e => {if (e.key === 'Enter') addIngredient()} )
     
+    // Initial check for button state
+    showAddIngredientButton()
+
     // Steps
     stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep()  } )
 });
@@ -117,12 +123,13 @@ function renderSteps() {
 
 // - UTILS
 function showAddIngredientButton() {
-    // only show if there is text in the field
+    const hasQty = ingredientFields[0].value.trim().length > 0
+    const hasName = ingredientFields[2].value.trim().length > 0
     
-    if (ingredientFields[0].value && ingredientFields[2].value) {
-        ingredientAddButton.style.display = 'block'
+    if (hasQty && hasName) {
+        ingredientAddButton.disabled = false
     } else {
-        ingredientAddButton.style.display = 'hidden'
+        ingredientAddButton.disabled = true
     }
 }