Merge pull request #19 from HediMuhamad/fix--ignoring-passed-onBlur-property

Fixing ignoring passed onBlur properties to controllers

Author: dashty94

src/components/InputController/AutocompleteController/AutocompleteController.tsx

@@ -27,6 +27,7 @@ export const AutocompleteController = ({
     loading = false,
     onChange,
     customOptionLabel,
+    onBlur,
     ...rest
 }: AutocompleteControllerProps) => {
     return loading ? (
@@ -39,7 +40,7 @@ export const AutocompleteController = ({
             control={control}
             name={name}
             defaultValue={multiple ? defaultValue || [] : defaultValue || null}
-            render={({ field: { onChange: fieldOnChange, ref, ...restField }, fieldState }) => {
+            render={({ field: { onChange: fieldOnChange, onBlur: fieldOnBlur, ref, ...restField }, fieldState }) => {
                 return (
                     <Autocomplete
                         options={options || []}
@@ -82,6 +83,10 @@ export const AutocompleteController = ({
                                     : get(newValue, optionValue, null)
                             );
                         }}
+                        onBlur={(...args) => {
+                            onBlur?.(...args);
+                            fieldOnBlur?.();
+                        }}
                         {...rest}
                         renderInput={(params) => {
                             return (

src/components/InputController/CheckboxController/CheckboxController.tsx

@@ -11,6 +11,7 @@ export const CheckboxController: React.FC<CheckboxControllerProps> = ({
     label,
     defaultValue,
     onChange,
+    onBlur,
     ...rest
 }) => {
     return (
@@ -33,6 +34,10 @@ export const CheckboxController: React.FC<CheckboxControllerProps> = ({
                                             onChange?.(e);
                                             field.onChange(e.target.checked);
                                         }}
+                                        onBlur={(...args) => {
+                                            onBlur?.(...args);
+                                            field.onBlur();
+                                        }}
                                     />
                                 }
                             />

src/components/InputController/RadioGroupController/RadioGroupController.tsx

@@ -12,6 +12,7 @@ export const RadioGroupController: React.FC<RadioGroupControllerProps> = ({
     control,
     options,
     onChange,
+    onBlur,
     ...rest
 }) => {
     return (
@@ -29,6 +30,10 @@ export const RadioGroupController: React.FC<RadioGroupControllerProps> = ({
                             onChange?.(event);
                             field.onChange(event);
                         }}
+                        onBlur={(...args) => {
+                            field?.onBlur?.();
+                            onBlur?.(...args);
+                        }}
                     >
                         {options.map((option, index) => (
                             <FormControlLabel

src/components/InputController/SelectController/SelectController.tsx

@@ -37,6 +37,7 @@ export const SelectController = ({
     defaultValue,
     options,
     onChange,
+    onBlur,
     optionValue = 'value',
     optionLabel = 'label',
     loading = false,
@@ -81,6 +82,10 @@ export const SelectController = ({
                                 onChange?.(event);
                                 restField.onChange(event);
                             }}
+                            onBlur={(...args) => {
+                                restField?.onBlur?.();
+                                onBlur?.(...args);
+                            }}
                             disabled={restField.disabled ?? rest.disabled}
                         >
                             {options?.map((option, index) => {

src/components/InputController/SwitchController/SwitchController.tsx

@@ -14,6 +14,7 @@ export const SwitchController: React.FC<SwitchControllerProps> = ({
     label,
     defaultValue = false,
     onChange,
+    onBlur,
     ...rest
 }) => {
     const [isChecked, setIsChecked] = useState(defaultValue);
@@ -39,6 +40,10 @@ export const SwitchController: React.FC<SwitchControllerProps> = ({
                                             field.onChange(Boolean(event.target.checked));
                                             onChange && onChange(event);
                                         }}
+                                        onBlur={(...args) => {
+                                            field?.onBlur?.();
+                                            onBlur?.(...args);
+                                        }}
                                     />
                                 }
                                 label={label}

src/components/InputController/TextFieldController/TextFieldController.tsx

@@ -8,6 +8,8 @@ export const TextFieldController: React.FC<TextFieldControllerProps> = ({
     control,
     defaultValue,
     type,
+    onChange,
+    onBlur,
     ...rest
 }) => {
     return (
@@ -31,6 +33,14 @@ export const TextFieldController: React.FC<TextFieldControllerProps> = ({
                         {...rest}
                         inputRef={ref}
                         {...restField}
+                        onChange={(...args) => {
+                            restField?.onChange?.(...args);
+                            onChange?.(...args);
+                        }}
+                        onBlur={(...args) => {
+                            restField?.onBlur?.();
+                            onBlur?.(...args);
+                        }}
                         disabled={restField.disabled ?? rest.disabled}
                     />
                 );

src/fields/typing.ts

@@ -40,6 +40,7 @@ export type SwitchControllerProps = MuiRhfFieldProps & {
     label: string;
     defaultValue?: boolean;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 };
 
 // RadioGroup
@@ -48,13 +49,15 @@ export type RadioGroupControllerProps = MuiRhfFieldProps & {
     defaultValue: string | number;
     options: Array<Option>;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
 };
 
 // Checkbox
 export type CheckboxControllerProps = MuiRhfFieldProps & {
     label: string;
     defaultValue?: boolean;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 };
 
 // Autocomplete

src/stories/Autocomplete.stories.tsx

@@ -58,7 +58,8 @@ Autocomplete.args = {
     options: [
         { title: 'Option One', entity: { id: 'entity-one' }, value: 'option-one' },
         { title: 'Option two', entity: { id: 'entity-two' }, value: 'option-two' }
-    ]
+    ],
+    onBlur: () => console.log('Autocomplete onBlur called')
 };
 
 export const AutocompleteMultiple = Template.bind({});

src/stories/CheckboxController.stories.tsx

@@ -31,5 +31,5 @@ export const Checkbox = Template.bind({});
 
 Checkbox.args = {
     name: 'checkbox',
-    label: 'Checkbox Controller'
+    label: 'Checkbox Controller',
 };

src/stories/RadioGroup.stories.tsx

@@ -36,5 +36,5 @@ FormGroup.args = {
     options: [
         { label: 'Option 1', value: 'option1' },
         { label: 'Option 2', value: 'option2' }
-    ]
+    ],
 };