fw-5108, prevent 'enter' in text array field

First-Peoples-Cultural-Council · Oct 26, 2023 · 2062b1c · 2062b1c
1 parent a6fb33e
commit 2062b1c
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/components/Form/TextArrayField.js b/src/components/Form/TextArrayField.js
@@ -20,6 +20,12 @@ function TextArrayField({
     name: nameId,
   })
 
+  const handleKeyDown = (event) => {
+    if (event.keyCode === 13) {
+      event.preventDefault()
+    }
+  }
+
   return (
     <Fragment key={`${nameId}_TextArrayField`}>
       <label className="block text-sm font-medium text-fv-charcoal">
@@ -34,14 +40,15 @@ function TextArrayField({
                   type="text"
                   className="flex w-full py-2 border border-white focus:outline-none focus:ring-secondary focus:border-secondary rounded-lg"
                   {...register(`${nameId}.${index}.text`)}
+                  onKeyDown={handleKeyDown}
                 />
                 <div className="has-tooltip flex items-center">
                   <span className="tooltip rounded shadow-lg p-1 bg-gray-100 text-primary text-xs -mt-12">
                     Delete {label.slice(0, -1)}
                   </span>
                   <button
                     type="button"
-                    aria-label="Delete Translation"
+                    aria-label={`Delete ${label.slice(0, -1)}`}
                     className="inline-flex"
                     onClick={() => remove(index)}
                   >