diff --git a/public/pages/CreateTrigger/components/ExpressionQuery/ExpressionQuery.js b/public/pages/CreateTrigger/components/ExpressionQuery/ExpressionQuery.js index e15a14a25..04280e723 100644 --- a/public/pages/CreateTrigger/components/ExpressionQuery/ExpressionQuery.js +++ b/public/pages/CreateTrigger/components/ExpressionQuery/ExpressionQuery.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useCallback } from 'react'; import { EuiFlexItem, EuiFlexGroup, @@ -121,16 +121,19 @@ const ExpressionQuery = ({ form.setFieldTouched(`expressionQueries_${idx}`, true); }; - const onRemoveExpression = (idx) => { - const expressions = _.cloneDeep(usedExpressions); - expressions.splice(idx, 1); - expressions.length && (expressions[0].description = ''); + const onRemoveExpression = useCallback( + (idx) => { + const expressions = _.cloneDeep(usedExpressions); + expressions.splice(idx, 1); + expressions.length && (expressions[0].description = ''); - if (!expressions?.length) { - expressions.push(DEFAULT_EXPRESSION); - } - setUsedExpressions([...expressions]); - }; + if (!expressions?.length) { + expressions.push(DEFAULT_EXPRESSION); + } + setUsedExpressions([...expressions]); + }, + [usedExpressions] + ); const hasInvalidExpression = () => { return !!usedExpressions.filter((expression) => expression.monitor_id === '')?.length; @@ -214,7 +217,7 @@ const ExpressionQuery = ({ fieldProps={{ validate: () => graphUi && validate(), }} - render={({ field, form }) => ( + render={({ form }) => ( openPopover(idx)} + onClick={() => openPopover(idx)} /> } isOpen={expression.isOpen}