diff --git a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx index 4083d71d6d..3a4c5bfba2 100644 --- a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx +++ b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigForm.tsx @@ -1,5 +1,5 @@ import { Button, Text } from "@appsmith/ads"; -import { default as React, useCallback, useRef, useEffect } from "react"; +import React, { useCallback, useState } from "react"; import type { FieldArrayFieldsProps } from "redux-form"; import styled from "styled-components"; import { v4 as uuid } from "uuid"; @@ -29,17 +29,19 @@ export const FunctionCallingConfigForm = ({ fields, formName, }: FunctionCallingConfigFormProps) => { - const latestFieldRef = useRef(null); - const previousFieldsLength = useRef(fields.length); + const [newlyAddedId, setNewlyAddedId] = useState(null); const handleAddFunctionButtonClick = useCallback(() => { + const id = uuid(); + fields.push({ - id: uuid(), + id, description: "", entityId: "", isApprovalRequired: false, entityType: "Query", }); + setNewlyAddedId(id); }, [fields]); const handleRemoveToolButtonClick = useCallback( @@ -49,38 +51,6 @@ export const FunctionCallingConfigForm = ({ [fields], ); - useEffect( - function handleAddFunction() { - // Only scroll and focus if a new field was added (length increased) - if ( - fields.length > previousFieldsLength.current && - latestFieldRef.current - ) { - // Scroll the new field into view - latestFieldRef.current.scrollIntoView({ - behavior: "smooth", - block: "center", - }); - - // Focus the menu button in the latest field - // The menu button is rendered by the Menu component from @appsmith/ads - const menuButton = latestFieldRef.current.querySelector( - "button.rc-select-selector", - ); - - if (menuButton) { - // Use setTimeout to ensure the button is fully rendered - setTimeout(() => { - (menuButton as HTMLButtonElement).focus(); - }, 100); - } - } - - previousFieldsLength.current = fields.length; - }, - [fields.length], - ); - return ( <>
@@ -108,14 +78,21 @@ export const FunctionCallingConfigForm = ({ ) : ( {fields.map((field, index) => { - const isLastField = index === fields.length - 1; + const fieldValue = fields.get(index); + const isNewlyAdded = fieldValue.id === newlyAddedId; + + // Reset the newly added ID after rendering to ensure focus only happens once + if (isNewlyAdded) { + setTimeout(() => setNewlyAddedId(null), 100); + } return ( -
+
diff --git a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigToolField.tsx b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigToolField.tsx index 7ebdfbd5d1..9b046fb8db 100644 --- a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigToolField.tsx +++ b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingConfigToolField.tsx @@ -12,6 +12,7 @@ interface FunctionCallingConfigToolFieldProps { formName: string; index: number; onRemove: (index: number) => void; + isLastAdded?: boolean; } const ConfigItemRoot = styled.div` @@ -39,6 +40,7 @@ const ConfigItemSelectWrapper = styled.div` export const FunctionCallingConfigToolField = ({ index, + isLastAdded, onRemove, ...props }: FunctionCallingConfigToolFieldProps) => { @@ -100,6 +102,7 @@ export const FunctionCallingConfigToolField = ({ diff --git a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingMenuField.tsx b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingMenuField.tsx index fc90cb392b..77f1ac2352 100644 --- a/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingMenuField.tsx +++ b/app/client/src/components/formControls/FunctionCallingConfigControl/components/FunctionCallingMenuField.tsx @@ -1,3 +1,4 @@ +import React, { useCallback, useMemo } from "react"; import { Button, Menu, @@ -12,7 +13,6 @@ import { MenuSubTrigger, MenuSubContent, } from "@appsmith/ads"; -import React, { useCallback, useMemo } from "react"; import { Field, type WrappedFieldProps, type BaseFieldProps } from "redux-form"; import type { FunctionCallingEntityType, @@ -35,6 +35,7 @@ interface FunctionCallingMenuFieldProps { value: string, entityType: FunctionCallingEntityType, ) => void; + autoFocus?: boolean; } interface FieldRenderProps @@ -82,7 +83,7 @@ const getSelectedValueInfo = ( }; const FunctionCallingMenuFieldRender = (props: FieldRenderProps) => { - const { children, disabled, input, onValueChange } = props; + const { autoFocus, children, disabled, input, onValueChange } = props; const options = useSelector(selectEntityOptions); const dispatch = useDispatch(); @@ -154,6 +155,7 @@ const FunctionCallingMenuFieldRender = (props: FieldRenderProps) => {