[Security Solution][Detections] fixes validation issues in rules acti…

…ons form (#141811) ## Summary - addresses #140593 - bulk edit of rules actions - [single rule actions update](#140593 (comment) ) ### Before Single rule actions update https://user-images.githubusercontent.com/92328789/192327231-8fdc846c-55f2-4ab1-8786-e96d2376af48.mov Bulk edit rule actions https://user-images.githubusercontent.com/92328789/192327094-ea830769-9633-43dc-be37-7ec68de4bd6f.mp4 ### After Single rule actions update and Bulk edit rule actions https://user-images.githubusercontent.com/92328789/192325274-010d11fc-17eb-47a1-b817-7a24eba8a365.mov
elastic · Sep 30, 2022 · 6b11352 · 6b11352
1 parent a1759bd
commit 6b11352
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/...plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx b/...plugins/security_solution/public/detections/components/rules/rule_actions_field/index.tsx
@@ -86,8 +86,7 @@ export const RuleActionsField: React.FC<Props> = ({ field, messageVariables }) =
       updatedActions[index] = deepMerge(updatedActions[index], { id });
       field.setValue(updatedActions);
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [field.setValue, actions]
+    [field, actions]
   );
 
   const setAlertActionsProperty = useCallback(
@@ -98,20 +97,26 @@ export const RuleActionsField: React.FC<Props> = ({ field, messageVariables }) =
   const setActionParamsProperty = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (key: string, value: any, index: number) => {
-      field.setValue((prevValue: RuleAction[]) => {
-        const updatedActions = [...prevValue];
-        updatedActions[index] = {
-          ...updatedActions[index],
-          params: {
-            ...updatedActions[index].params,
-            [key]: value,
-          },
-        };
-        return updatedActions;
-      });
+      // validation is not triggered correctly when actions params updated (more details in https://github.com/elastic/kibana/issues/142217)
+      // wrapping field.setValue in setTimeout fixes the issue above
+      // and triggers validation after params have been updated
+      setTimeout(
+        () =>
+          field.setValue((prevValue: RuleAction[]) => {
+            const updatedActions = [...prevValue];
+            updatedActions[index] = {
+              ...updatedActions[index],
+              params: {
+                ...updatedActions[index].params,
+                [key]: value,
+              },
+            };
+            return updatedActions;
+          }),
+        0
+      );
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [field.setValue]
+    [field]
   );
 
   const actionForm = useMemo(