diff --git a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
index 7b5374cea4da7f..e9276ed128fb40 100644
--- a/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
+++ b/x-pack/plugins/infra/public/components/alerting/metrics/expression.tsx
@@ -135,7 +135,7 @@ export const Expressions: React.FC<Props> = props => {
     [setAlertParams, alertParams.criteria]
   );
 
-  const onFilterQuerySubmit = useCallback(
+  const onFilterChange = useCallback(
     (filter: any) => {
       setAlertParams('filterQuery', filter);
     },
@@ -222,8 +222,8 @@ export const Expressions: React.FC<Props> = props => {
   }, [alertsContext.metadata, defaultExpression, source]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleFieldSearchChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => onFilterQuerySubmit(e.target.value),
-    [onFilterQuerySubmit]
+    (e: ChangeEvent<HTMLInputElement>) => onFilterChange(e.target.value),
+    [onFilterChange]
   );
 
   return (
@@ -293,7 +293,8 @@ export const Expressions: React.FC<Props> = props => {
         {(alertsContext.metadata && (
           <MetricsExplorerKueryBar
             derivedIndexPattern={derivedIndexPattern}
-            onSubmit={onFilterQuerySubmit}
+            onChange={onFilterChange}
+            onSubmit={onFilterChange}
             value={alertParams.filterQuery}
           />
         )) || (
diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/kuery_bar.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/kuery_bar.tsx
index 7c3e0444dbeea6..ed001124fa320e 100644
--- a/x-pack/plugins/infra/public/components/metrics_explorer/kuery_bar.tsx
+++ b/x-pack/plugins/infra/public/components/metrics_explorer/kuery_bar.tsx
@@ -14,6 +14,7 @@ import { esKuery, IIndexPattern } from '../../../../../../src/plugins/data/publi
 interface Props {
   derivedIndexPattern: IIndexPattern;
   onSubmit: (query: string) => void;
+  onChange?: (query: string) => void;
   value?: string | null;
   placeholder?: string;
 }
@@ -30,6 +31,7 @@ function validateQuery(query: string) {
 export const MetricsExplorerKueryBar = ({
   derivedIndexPattern,
   onSubmit,
+  onChange,
   value,
   placeholder,
 }: Props) => {
@@ -46,6 +48,9 @@ export const MetricsExplorerKueryBar = ({
   const handleChange = (query: string) => {
     setValidation(validateQuery(query));
     setDraftQuery(query);
+    if (onChange) {
+      onChange(query);
+    }
   };
 
   const filteredDerivedIndexPattern = {