Fix showing suggestions for an unfocused custom expression field (#31994)

e2e/test/scenarios/custom-column/cc-typing-suggestion.cy.spec.js

 import {
   enterCustomColumnDetails,
   openProductsTable,
+  popover,
   restore,
+  summarize,
 } from "e2e/support/helpers";
 
 describe("scenarios > question > custom column > typing suggestion", () => {
@@ -10,16 +12,16 @@ describe("scenarios > question > custom column > typing suggestion", () => {
     cy.signInAsAdmin();
 
     openProductsTable({ mode: "notebook" });
-    // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-    cy.findByText("Custom column").click();
   });
 
   it("should not suggest arithmetic operators", () => {
+    addCustomColumn();
     enterCustomColumnDetails({ formula: "[Price] " });
     cy.findByTestId("expression-suggestions-list").should("not.exist");
   });
 
   it("should correctly accept the chosen field suggestion", () => {
+    addCustomColumn();
     enterCustomColumnDetails({
       formula: "[Rating]{leftarrow}{leftarrow}{leftarrow}",
     });
@@ -34,6 +36,7 @@ describe("scenarios > question > custom column > typing suggestion", () => {
   });
 
   it("should correctly accept the chosen function suggestion", () => {
+    addCustomColumn();
     enterCustomColumnDetails({ formula: "LTRIM([Title])" });
 
     // Place the cursor between "is" and "empty"
@@ -47,6 +50,7 @@ describe("scenarios > question > custom column > typing suggestion", () => {
   });
 
   it("should correctly insert function suggestion with the opening parenthesis", () => {
+    addCustomColumn();
     enterCustomColumnDetails({ formula: "LOW{enter}" });
 
     // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
@@ -54,6 +58,7 @@ describe("scenarios > question > custom column > typing suggestion", () => {
   });
 
   it("should show expression function helper if a proper function is typed", () => {
+    addCustomColumn();
     enterCustomColumnDetails({ formula: "lower(" });
 
     // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
@@ -74,4 +79,16 @@ describe("scenarios > question > custom column > typing suggestion", () => {
       "be.visible",
     );
   });
+
+  it("should not show suggestions for an unfocused field (metabase#31643)", () => {
+    summarize({ mode: "notebook" });
+    popover().findByText("Custom Expression").click();
+    enterCustomColumnDetails({ formula: "Count{enter}" });
+    popover().findByLabelText("Name").focus();
+    cy.findByTestId("expression-suggestions-list").should("not.exist");
+  });
 });
+
+const addCustomColumn = () => {
+  cy.findByTestId("action-buttons").findByText("Custom column").click();
+};

frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield/ExpressionEditorTextfield.tsx

@@ -407,7 +407,9 @@ class ExpressionEditorTextfield extends React.Component<
     });
 
     this.setState({ helpText: helpText || null });
-    this.updateSuggestions(suggestions);
+    if (this.state.isFocused) {
+      this.updateSuggestions(suggestions);
+    }
   }
 
   errorAsMarkers(errorMessage: ErrorWithMessage | null = null): IMarker[] {