fix: onBlur now works in Inputs in a Form component

supabase · May 11, 2022 · cae30c0 · cae30c0
1 parent b306ec7
commit cae30c0
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 17 deletions.
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -158,7 +158,11 @@ export function Checkbox({
         if (className) containerClasses.push(className)
 
         if (values && checked === undefined) active = values[id || name]
-        if (handleBlur) onBlur = handleBlur
+
+        function handleBlurEvent(e: React.FocusEvent<HTMLInputElement>) {
+          if (handleBlur) handleBlur(e)
+          if (onBlur) onBlur(e)
+        }
 
         return (
           <div className={containerClasses.join(' ')}>
@@ -170,7 +174,7 @@ export function Checkbox({
               className={[__styles.base, __styles.size[size]].join(' ')}
               onChange={onInputChange}
               onFocus={onFocus ? (event) => onFocus(event) : undefined}
-              onBlur={onBlur}
+              onBlur={handleBlurEvent}
               checked={active}
               value={value ? value : markupId}
               disabled={disabled}

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -79,7 +79,11 @@ function Input({
   } = useFormContext()
 
   if (values && !value) value = values[id || name]
-  if (handleBlur) onBlur = handleBlur
+
+  function handleBlurEvent(e: React.FocusEvent<HTMLInputElement>) {
+    if (handleBlur) handleBlur(e)
+    if (onBlur) onBlur(e)
+  }
 
   if (!error) {
     if (errors && !error) error = errors[id || name]
@@ -155,7 +159,7 @@ function Input({
           name={name}
           onChange={onInputChange}
           onFocus={onFocus ? (event) => onFocus(event) : undefined}
-          onBlur={onBlur}
+          onBlur={handleBlurEvent}
           onKeyDown={onKeyDown ? (event) => onKeyDown(event) : undefined}
           placeholder={placeholder}
           ref={inputRef}
@@ -268,7 +272,11 @@ function TextArea({
   } = useFormContext()
 
   if (values && !value) value = values[id || name]
-  if (handleBlur) onBlur = handleBlur
+
+  function handleBlurEvent(e: React.FocusEvent<HTMLTextAreaElement>) {
+    if (handleBlur) handleBlur(e)
+    if (onBlur) onBlur(e)
+  }
 
   if (!error) {
     if (errors && !error) error = errors[id || name]
@@ -322,7 +330,7 @@ function TextArea({
           placeholder={placeholder}
           onChange={onInputChange}
           onFocus={onFocus ? (event) => onFocus(event) : undefined}
-          onBlur={onBlur}
+          onBlur={handleBlurEvent}
           onKeyDown={onKeyDown ? (event) => onKeyDown(event) : undefined}
           value={value}
           className={classes.join(' ')}

diff --git a/src/components/InputNumber/InputNumber.tsx b/src/components/InputNumber/InputNumber.tsx
@@ -86,7 +86,11 @@ function InputNumber({
   } = useFormContext()
 
   if (values && !value) value = values[id]
-  if (handleBlur) onBlur = handleBlur
+
+  function handleBlurEvent(e: React.FocusEvent<HTMLInputElement>) {
+    if (handleBlur) handleBlur(e)
+    if (onBlur) onBlur(e)
+  }
 
   if (!error) {
     if (errors && !error) error = errors[id || name]
@@ -187,7 +191,7 @@ function InputNumber({
             name={name}
             onChange={onInputChange}
             onFocus={onFocus ? (event) => onFocus(event) : undefined}
-            onBlur={onBlur}
+            onBlur={handleBlurEvent}
             onKeyDown={onKeyDown ? (event) => onKeyDown(event) : undefined}
             placeholder={placeholder}
             // ref={inputRefCurrent}

diff --git a/src/components/Listbox/Listbox2.tsx b/src/components/Listbox/Listbox2.tsx
@@ -85,7 +85,11 @@ function Listbox({
   if (values && !value) {
     defaultValue = values[id || name]
   }
-  if (handleBlur) onBlur = handleBlur
+
+  function handleBlurEvent(e: React.FocusEvent<HTMLButtonElement>) {
+    if (handleBlur) handleBlur(e)
+    if (onBlur) onBlur(e)
+  }
 
   if (!error) {
     if (errors && !error) error = errors[id || name]
@@ -213,7 +217,7 @@ function Listbox({
           <button
             ref={triggerRef}
             className={selectClasses.join(' ')}
-            onBlur={onBlur}
+            onBlur={handleBlurEvent}
             onFocus={onFocus}
             name={name}
             id={id}

diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
@@ -71,7 +71,6 @@ function RadioGroup({
   if (values && !value) value = values[id || name]
   // console.log('errors in. radio group', errors)
   // console.log('values in radio group', values)
-  // if (handleBlur) onBlur = handleBlur
 
   if (!error) {
     if (errors && !error) error = errors[id || name]
@@ -174,7 +173,11 @@ function Radio({
   const inputName = name
 
   const { handleBlur } = useFormContext()
-  if (handleBlur) onBlur = handleBlur
+
+  function handleBlurEvent(e: React.FocusEvent<HTMLInputElement>) {
+    if (handleBlur) handleBlur(e)
+    if (onBlur) onBlur(e)
+  }
 
   return (
     <RadioContext.Consumer>
@@ -254,7 +257,7 @@ function Radio({
                 console.log('radio input changed')
                 onInputChange(e)
               }}
-              onBlur={onBlur}
+              onBlur={handleBlurEvent}
               onFocus={onFocus ? (event) => onFocus(event) : undefined}
             />
             {addOnBefore}

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -83,7 +83,11 @@ function Select({
   } = useFormContext()
 
   if (values && !value) value = values[id]
-  if (handleBlur) onBlur = handleBlur
+
+  function handleBlurEvent(e: React.FocusEvent<HTMLSelectElement>) {
+    if (handleBlur) handleBlur(e)
+    if (onBlur) onBlur(e)
+  }
 
   if (!error) {
     if (errors && !error) error = errors[id || name]
@@ -137,7 +141,7 @@ function Select({
           className={classes.join(' ')}
           onChange={onInputChange}
           onFocus={onFocus ? (event) => onFocus(event) : undefined}
-          onBlur={onBlur}
+          onBlur={handleBlurEvent}
           ref={inputRef}
           value={value}
           disabled={disabled}

diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
@@ -64,7 +64,11 @@ function Toggle({
   } = useFormContext()
 
   if (values && !checked) checked = values[id || name]
-  if (handleBlur) onBlur = handleBlur
+
+  function handleBlurEvent(e: React.FocusEvent<HTMLButtonElement>) {
+    if (handleBlur) handleBlur(e)
+    if (onBlur) onBlur(e)
+  }
 
   if (!error) {
     if (errors && !error) error = errors[id || name]
@@ -135,7 +139,7 @@ function Toggle({
         onClick={onClick}
         disabled={disabled}
         onFocus={onFocus ? (event) => onFocus(event) : undefined}
-        onBlur={onBlur}
+        onBlur={handleBlurEvent}
         onKeyDown={onKeyDown ? (event) => onKeyDown(event) : undefined}
         {...props}
       >