Custom expression editor: handle source reformatting (#19646)

When the text representation gets reformatted, the old caret position
might not be sensible anymore. Hence, just push the caret to the end.

* Add e2e test for caret position after blur and refocus

Co-authored-by: Gustavo Saiani <gustavo@poe.ma>

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

@@ -118,8 +118,15 @@ export default class ExpressionEditorTextfield extends React.Component {
     const { expression, query, startRule } = newProps;
     if (!this.state || !_.isEqual(this.props.expression, expression)) {
       const source = format(expression, { query, startRule });
+      const currentSource = this.state?.source;
       this.setState({ source, expression });
       this.clearSuggestions();
+
+      // Reset caret position due to reformatting
+      if (currentSource !== source && this.input.current) {
+        const { editor } = this.input.current;
+        setTimeout(() => editor.gotoLine(1, source.length), 0);
+      }
     }
   }
 

frontend/test/metabase/scenarios/custom-column/custom-column.cy.spec.js

@@ -495,6 +495,24 @@ describe("scenarios > question > custom column", () => {
       .and("eq", "ace_text-input");
   });
 
+  it("should allow tabbing away from, then back to editor, while formatting expression and placing caret after reformatted expression", () => {
+    openOrdersTable({ mode: "notebook" });
+    cy.icon("add_data").click();
+
+    enterCustomColumnDetails({ formula: "1+1" });
+
+    cy.realPress("Tab");
+    cy.realPress(["Shift", "Tab"]);
+
+    // `1+1` (3 chars) is reformatted to `1 + 1` (5 chars)
+    cy.findByDisplayValue("1 + 1").type("2");
+
+    // Fix needed will prevent display value from being `1 +2 1`.
+    // That's because the caret position after refocusing on textarea
+    // would still be after the 3rd character
+    cy.findByDisplayValue("1 + 12");
+  });
+
   it("should allow choosing a suggestion with Tab", () => {
     openOrdersTable({ mode: "notebook" });
     cy.icon("add_data").click();