Merge pull request #1104 from Hexastack/1103-issue---refactor-to-use-spreading-props

refactor(frontend): prioritize speading props

frontend/src/app-components/inputs/AutoCompleteEntitySelect.tsx

@@ -52,15 +52,9 @@ const AutoCompleteEntitySelect = <
   Multiple extends boolean | undefined = true,
 >(
   {
-    label,
-    value,
     entity,
     format,
     searchFields,
-    multiple,
-    onChange,
-    error,
-    helperText,
     preprocess,
     idKey = "id",
     labelKey,
@@ -106,17 +100,11 @@ const AutoCompleteEntitySelect = <
 
   return (
     <AutoCompleteSelect<Value, Label, Multiple>
-      value={value}
-      onChange={onChange}
-      label={label}
-      multiple={multiple}
       ref={ref}
       idKey={idKey}
       labelKey={labelKey}
       options={options || []}
       onSearch={onSearch}
-      error={error}
-      helperText={helperText}
       loading={isFetching}
       {...rest}
     />

frontend/src/app-components/inputs/AutoCompleteSelect.tsx

@@ -52,15 +52,12 @@ const AutoCompleteSelect = <
   FreeSolo extends boolean | undefined = false,
 >(
   {
-    label,
     value,
     options = [],
     idKey = "id",
     labelKey,
     multiple,
     onSearch,
-    error,
-    helperText,
     isOptionEqualToValue = (option, value) =>
       option?.[idKey] === value?.[idKey],
     getOptionLabel = (option) => option?.[String(labelKey)] || option?.[idKey],
@@ -157,10 +154,7 @@ const AutoCompleteSelect = <
       renderInput={(props) => (
         <Input
           {...props}
-          label={label}
           onChange={(e) => handleSearch(e.target.value)}
-          error={error}
-          helperText={helperText}
           InputProps={{
             ...props.InputProps,
             endAdornment: (

frontend/src/app-components/inputs/PasswordInput.tsx

@@ -14,7 +14,7 @@ import { forwardRef, useState } from "react";
 import { Input } from "./Input";
 
 export const PasswordInput = forwardRef<any, TextFieldProps>(
-  ({ onChange, InputProps, ...rest }, ref) => {
+  ({ InputProps, ...rest }, ref) => {
     const [showPassword, setShowPassword] = useState(false);
     const handleTogglePasswordVisibility = () => {
       setShowPassword(!showPassword);
@@ -25,7 +25,6 @@ export const PasswordInput = forwardRef<any, TextFieldProps>(
         ref={ref}
         type={showPassword ? "text" : "password"}
         {...rest}
-        onChange={onChange}
         InputProps={{
           ...InputProps,
           endAdornment: (

frontend/src/components/visual-editor/form/ButtonsMessageForm.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
@@ -63,17 +63,9 @@ const ButtonsMessageForm = () => {
           name="message.buttons"
           control={control}
           defaultValue={block?.message.buttons || []}
-          render={({ field }) => {
-            const { value, onChange } = field;
-
-            return (
-              <ButtonsInput
-                fieldPath="message.buttons"
-                value={value}
-                onChange={onChange}
-              />
-            );
-          }}
+          render={({ field }) => (
+            <ButtonsInput {...field} fieldPath="message.buttons" />
+          )}
         />
       </ContentItem>
     </>

frontend/src/components/visual-editor/form/ListMessageForm.tsx

@@ -295,21 +295,14 @@ const ListMessageForm = () => {
           name="options.content.buttons"
           control={control}
           defaultValue={content?.buttons || []}
-          render={({ field }) => {
-            const { value, onChange } = field;
-
-            return (
-              <ButtonsInput
-                fieldPath="options.content.buttons"
-                value={value}
-                onChange={(buttons) => {
-                  onChange(buttons);
-                }}
-                disablePayload={true}
-                maxInput={displayMode === "list" ? 1 : 2}
-              />
-            );
-          }}
+          render={({ field }) => (
+            <ButtonsInput
+              {...field}
+              fieldPath="options.content.buttons"
+              disablePayload={true}
+              maxInput={displayMode === "list" ? 1 : 2}
+            />
+          )}
         />
       </ContentItem>
     </Grid>