From 3014cf682fe97c70f3b1cbaa63e765b56b0b2667 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Fri, 29 Nov 2024 18:05:26 +0100
Subject: [PATCH] option to make textarea input required or optional

---
 src/Components/Input/TextAreaInput.tsx                   | 4 +++-
 src/Components/Profile/Subcomponents/ProfileTextForm.tsx | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx
index 91642f0e..3369e792 100644
--- a/src/Components/Input/TextAreaInput.tsx
+++ b/src/Components/Input/TextAreaInput.tsx
@@ -15,6 +15,7 @@ type TextAreaProps = {
   inputStyle?: string
   defaultValue: string
   placeholder?: string
+  required?: boolean
   updateFormValue?: (value: string) => void
 }
 
@@ -30,6 +31,7 @@ export function TextAreaInput({
   inputStyle,
   defaultValue,
   placeholder,
+  required = true,
   updateFormValue,
 }: TextAreaProps) {
   const ref = useRef<HTMLTextAreaElement>(null)
@@ -90,7 +92,7 @@ export function TextAreaInput({
         </label>
       ) : null}
       <textarea
-        required
+        required={required}
         ref={ref}
         value={inputValue}
         name={dataField}
diff --git a/src/Components/Profile/Subcomponents/ProfileTextForm.tsx b/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
index 9509d92f..1d72a3b3 100644
--- a/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
+++ b/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
@@ -18,6 +18,7 @@ export const ProfileTextForm = ({
   heading,
   size,
   hideInputLabel,
+  required,
 }: {
   state: FormState
   setState: React.Dispatch<React.SetStateAction<any>>
@@ -25,6 +26,7 @@ export const ProfileTextForm = ({
   heading: string
   size: string
   hideInputLabel: boolean
+  required?: boolean
 }) => {
   const [field, setField] = useState<string>(dataField || 'text')
 
@@ -57,6 +59,7 @@ export const ProfileTextForm = ({
         labelStyle={hideInputLabel ? 'tw-hidden' : ''}
         containerStyle={size === 'full' ? 'tw-grow tw-h-full' : ''}
         inputStyle={size === 'full' ? 'tw-h-full' : 'tw-h-24'}
+        required={required}
       />
     </div>
   )