Fix TextWidget inconsistent behavior when all chars are removed (#31919)

* Fix TextWidget inconsistent behavior when all chars are removed

* Revert "Fix TextWidget inconsistent behavior when all chars are removed"

This reverts commit d17b530ab0d85b7d1fde5dc0566ebf0641bd5a46.

* Add normalization for value in field filters

* Add normalization for default value

* Update frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx

Co-authored-by: Mahatthana (Kelvin) Nomsawadi <me@bboykelvin.dev>

* Add e2e test

---------

Co-authored-by: Mahatthana (Kelvin) Nomsawadi <me@bboykelvin.dev>

e2e/test/scenarios/native-filters/reproductions/31606.cy.spec.js

+import {
+  filterWidget,
+  openNativeEditor,
+  restore,
+  queryBuilderMain,
+  popover,
+} from "e2e/support/helpers";
+import * as SQLFilter from "../helpers/e2e-sql-filter-helpers";
+import * as FieldFilter from "../helpers/e2e-field-filter-helpers";
+
+const SQL_QUERY = "SELECT * FROM PRODUCTS WHERE CATEGORY = {{test}}";
+
+describe("issue 31606", { tags: "@external" }, () => {
+  beforeEach(() => {
+    cy.intercept("POST", "/api/dataset").as("dataset");
+
+    restore();
+    cy.signInAsAdmin();
+  });
+
+  it("should clear values on UI for Text, Number, Date and Field Filter Types (metabase#31606)", () => {
+    openNativeEditor();
+
+    SQLFilter.enterParameterizedQuery(SQL_QUERY);
+
+    // Text
+    SQLFilter.setWidgetValue("Gizmo");
+    SQLFilter.runQuery();
+
+    queryBuilderMain()
+      .findByText(/missing required parameters/)
+      .should("not.exist");
+
+    filterWidget().findByRole("textbox").clear();
+
+    SQLFilter.runQuery();
+    queryBuilderMain()
+      .findByText(/missing required parameters/)
+      .should("be.visible");
+
+    filterWidget().within(() => {
+      cy.icon("close").should("not.exist");
+    });
+
+    SQLFilter.openTypePickerFromDefaultFilterType();
+    SQLFilter.chooseType("Number");
+    SQLFilter.setWidgetValue("123");
+
+    SQLFilter.runQuery();
+
+    queryBuilderMain()
+      .findByText(/missing required parameters/)
+      .should("not.exist");
+
+    filterWidget().findByRole("textbox").clear();
+    SQLFilter.runQuery();
+    queryBuilderMain()
+      .findByText(/missing required parameters/)
+      .should("be.visible");
+    filterWidget().within(() => {
+      cy.icon("close").should("not.exist");
+    });
+
+    // Field Filter - Default value
+    SQLFilter.openTypePickerFromSelectedFilterType("Number");
+    SQLFilter.chooseType("Field Filter");
+
+    FieldFilter.mapTo({
+      table: "Products",
+      field: "ID",
+    });
+
+    FieldFilter.setWidgetType("ID");
+
+    FieldFilter.openEntryForm({ isFilterRequired: true });
+    FieldFilter.addDefaultStringFilter("2");
+
+    cy.findByTestId("sidebar-content").within(() => {
+      cy.findByText("Enter a default value…").should("not.exist");
+
+      cy.findByText("Default filter widget value").next().click();
+    });
+
+    popover().within(() => {
+      cy.icon("close").click();
+      cy.findByText("Update filter").click();
+    });
+    cy.findByTestId("sidebar-content").within(() => {
+      cy.findByText("Enter a default value…").should("be.visible");
+    });
+
+    // Field Filter
+    SQLFilter.setWidgetValue("23");
+    popover().findByText("Add filter").click();
+
+    filterWidget().within(() => {
+      cy.icon("close").should("be.visible");
+    });
+
+    SQLFilter.runQuery();
+    queryBuilderMain()
+      .findByText(/missing required parameters/)
+      .should("not.exist");
+
+    filterWidget().click();
+
+    popover().within(() => {
+      cy.icon("close").click();
+      cy.findByText("Update filter").click();
+    });
+
+    filterWidget().within(() => {
+      cy.icon("close").should("not.exist");
+    });
+  });
+});

frontend/src/metabase/query_builder/actions/core/core.js

@@ -300,10 +300,22 @@ export const SET_PARAMETER_VALUE = "metabase/qb/SET_PARAMETER_VALUE";
 export const setParameterValue = createAction(
   SET_PARAMETER_VALUE,
   (parameterId, value) => {
-    return { id: parameterId, value };
+    return { id: parameterId, value: normalizeValue(value) };
   },
 );
 
+function normalizeValue(value) {
+  if (value === "") {
+    return null;
+  }
+
+  if (Array.isArray(value) && value.length === 0) {
+    return null;
+  }
+
+  return value;
+}
+
 export const REVERT_TO_REVISION = "metabase/qb/REVERT_TO_REVISION";
 export const revertToRevision = createThunkAction(
   REVERT_TO_REVISION,

frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx

@@ -119,7 +119,7 @@ export class TagEditorParam extends Component {
     if (this.props.tag[attr] !== val) {
       this.props.setTemplateTag({
         ...this.props.tag,
-        [attr]: val,
+        [attr]: val?.length > 0 ? val : null,
       });
     }
   }