[FIX] side panel: close selection input when switching tab

When focusing the selection input in the chart side panel, changing
tab would not close the selection input, even though the input isn't
visible anymore.

It's because since 91c0583, changing the tab would keep the component
mounted, only hiding it with `d-none` (to keep its state). Relying on
the selection input `onWillUnmount` to reset the state is not enough.

We now rely on a `useEffect` that checks the `input.offsetParent`
property, which is `null` when an ancestor has `display: none`.

Task: 5249165

Author: hokolomopo

src/components/selection_input/selection_input.ts

@@ -129,6 +129,13 @@ export class SelectionInput extends Component<Props, SpreadsheetChildEnv> {
       () => this.focusedInput.el?.focus(),
       () => [this.focusedInput.el]
     );
+    useEffect(() => {
+      // Check the offsetParent to know if the input or an ancestor is `display: none` (eg. when changing side panel tab)
+      if (this.store.hasFocus && this.selectionRef.el?.offsetParent === null) {
+        this.reset();
+      }
+    });
+
     this.store = useLocalStore(
       SelectionInputStore,
       this.props.ranges,

tests/figures/chart/charts_component.test.ts

@@ -11,6 +11,7 @@ import {
 import { toHex, toZone } from "../../../src/helpers";
 import { ScorecardChart } from "../../../src/helpers/figures/charts";
 import { getChartColorsGenerator } from "../../../src/helpers/figures/charts/runtime";
+import { HighlightStore } from "../../../src/stores/highlight_store";
 import {
   CHART_TYPES,
   ChartDefinition,
@@ -1128,6 +1129,22 @@ describe("charts", () => {
     expect(chartPanel.scrollTop).toBe(100);
   });
 
+  test("selection input is closed when switching tab", async () => {
+    createTestChart("basicChart");
+    await mountChartSidePanel();
+    const highlightStore = env.getStore(HighlightStore);
+
+    await simulateClick(".o-selection-input input");
+    expect(".o-selection-ok").toHaveCount(1);
+    expect(highlightStore.highlights.length).toBe(1);
+
+    await openChartDesignSidePanel(model, env, fixture, chartId);
+    await nextTick(); // the check is done in a `useEffect`, we need to wait for the next render
+
+    expect(".o-selection-ok").toHaveCount(0);
+    expect(highlightStore.highlights.length).toBe(0);
+  });
+
   describe.each(TEST_CHART_TYPES)("selecting other chart will adapt sidepanel", (chartType) => {
     test.each(["click", "SELECT_FIGURE command"])("when using %s", async (selectMethod: string) => {
       createTestChart(chartType);

tests/setup/jest.setup.ts

@@ -87,6 +87,24 @@ beforeEach(() => {
       const blob = new window.Blob([data], { type });
       setTimeout(() => callback(blob), 0);
     });
+
+  // offsetParent should return the nearest positioned ancestor, or null if an ancestor has `display: none`
+  jest
+    .spyOn(HTMLElement.prototype, "offsetParent", "get")
+    .mockImplementation(function (this: HTMLElement) {
+      let parentEl: HTMLElement | null = this.parentElement;
+      while (parentEl) {
+        if (
+          getComputedStyle(parentEl).display === "none" ||
+          parentEl.classList.contains("d-none")
+        ) {
+          return null;
+        }
+        parentEl = parentEl.parentElement;
+      }
+      return this.parentElement; // should be nearest positioned ancestor, but simplified for tests
+    });
+
   patchSessionMove();
 });