[IMP] DV: auto focus input

LucasLefevre · LucasLefevre · commit 7eeea68b5349 · 2025-10-24T12:54:21.000Z
When switching a data validation to "Value In Range", automatically focus the range input to allow selecting a range right away without an additional click to focus the input. We do the same for all validation types that have an associated input. Task: 4862354 Part-of: #7252 Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>
diff --git a/src/components/composer/standalone_composer/standalone_composer.ts b/src/components/composer/standalone_composer/standalone_composer.ts
@@ -1,7 +1,7 @@
 import { cssPropertiesToCss } from "@odoo/o-spreadsheet-engine/components/helpers/css";
 import { Token } from "@odoo/o-spreadsheet-engine/formulas/tokenizer";
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
-import { Component } from "@odoo/owl";
+import { Component, onMounted } from "@odoo/owl";
 import { AutoCompleteProviderDefinition } from "../../../registries/auto_completes";
 import { Store, useLocalStore, useStore } from "../../../store_engine";
 import { Color, ComposerFocusType, UID } from "../../../types/index";
@@ -21,6 +21,7 @@ interface Props {
   title?: string;
   class?: string;
   invalid?: boolean;
+  autofocus?: boolean;
   getContextualColoredSymbolToken?: (token: Token) => Color;
 }
 
@@ -36,6 +37,7 @@ export class StandaloneComposer extends Component<Props, SpreadsheetChildEnv> {
     title: { type: String, optional: true },
     class: { type: String, optional: true },
     invalid: { type: Boolean, optional: true },
+    autofocus: { type: Boolean, optional: true },
     getContextualColoredSymbolToken: { type: Function, optional: true },
   };
   static components = { Composer };
@@ -69,6 +71,12 @@ export class StandaloneComposer extends Component<Props, SpreadsheetChildEnv> {
       setCurrentContent: this.standaloneComposerStore.setCurrentContent,
       stopEdition: this.standaloneComposerStore.stopEdition,
     };
+    onMounted(() => {
+      if (this.props.autofocus && this.focus === "inactive") {
+        this.composerFocusStore.focusComposer(this.composerInterface, {});
+        this.composerFocusStore.activeComposer.editionMode;
+      }
+    });
   }
 
   get focus(): ComposerFocusType {
diff --git a/src/components/selection_input/selection_input.ts b/src/components/selection_input/selection_input.ts
@@ -12,6 +12,7 @@ interface Props {
   ranges: string[];
   hasSingleRange?: boolean;
   required?: boolean;
+  autofocus?: boolean;
   isInvalid?: boolean;
   class?: string;
   onSelectionChanged?: (ranges: string[]) => void;
@@ -50,6 +51,7 @@ export class SelectionInput extends Component<Props, SpreadsheetChildEnv> {
     ranges: Array,
     hasSingleRange: { type: Boolean, optional: true },
     required: { type: Boolean, optional: true },
+    autofocus: { type: Boolean, optional: true },
     isInvalid: { type: Boolean, optional: true },
     class: { type: String, optional: true },
     onSelectionChanged: { type: Function, optional: true },
@@ -105,6 +107,9 @@ export class SelectionInput extends Component<Props, SpreadsheetChildEnv> {
       this.props.colors,
       this.props.disabledRanges
     );
+    if (this.props.autofocus) {
+      this.store.focusById(this.store.selectionInputs[0]?.id);
+    }
     onWillUpdateProps((nextProps) => {
       if (nextProps.ranges.join() !== this.store.selectionInputValues.join()) {
         this.triggerChange();
diff --git a/src/components/side_panel/criterion_form/criterion_form.ts b/src/components/side_panel/criterion_form/criterion_form.ts
@@ -1,5 +1,5 @@
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
-import { Component, onMounted } from "@odoo/owl";
+import { Component } from "@odoo/owl";
 import { useStore } from "../../../store_engine";
 import { GenericCriterion } from "../../../types";
 import { ComposerFocusStore } from "../../composer/composer_focus_store";
@@ -8,6 +8,7 @@ interface Props<T extends GenericCriterion> {
   criterion: T;
   onCriterionChanged: (criterion: T) => void;
   disableFormulas?: boolean;
+  autofocus?: boolean;
 }
 
 export abstract class CriterionForm<
@@ -17,12 +18,13 @@ export abstract class CriterionForm<
     criterion: Object,
     onCriterionChanged: Function,
     disableFormulas: { type: Boolean, optional: true },
+    autofocus: { type: Boolean, optional: true },
   };
   setup() {
     const composerFocusStore = useStore(ComposerFocusStore);
-    onMounted(() => {
+    if (composerFocusStore.activeComposer.editionMode !== "inactive") {
       composerFocusStore.activeComposer.stopEdition();
-    });
+    }
   }
 
   updateCriterion(criterion: Partial<T>) {
diff --git a/src/components/side_panel/criterion_form/criterion_input/criterion_input.ts b/src/components/side_panel/criterion_form/criterion_input/criterion_input.ts
@@ -41,8 +41,8 @@ export class CriterionInput extends Component<Props, SpreadsheetChildEnv> {
   setup() {
     useEffect(
       () => {
-        if (this.props.focused) {
-          this.inputRef.el!.focus();
+        if (this.props.focused && this.inputRef.el) {
+          this.inputRef.el.focus();
         }
       },
       () => [this.props.focused, this.inputRef.el]
@@ -94,6 +94,7 @@ export class CriterionInput extends Component<Props, SpreadsheetChildEnv> {
       defaultRangeSheetId: this.env.model.getters.getActiveSheetId(),
       invalid: this.state.shouldDisplayError && !!this.errorMessage,
       defaultStatic: true,
+      autofocus: this.props.focused,
     };
   }
 
diff --git a/src/components/side_panel/criterion_form/date_criterion/date_criterion.xml b/src/components/side_panel/criterion_form/date_criterion/date_criterion.xml
@@ -17,6 +17,7 @@
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
       disableFormulas="props.disableFormulas"
+      focused="props.autofocus"
     />
   </t>
 </templates>
diff --git a/src/components/side_panel/criterion_form/double_input_criterion/double_input_criterion.xml b/src/components/side_panel/criterion_form/double_input_criterion/double_input_criterion.xml
@@ -5,6 +5,7 @@
       onValueChanged.bind="onFirstValueChanged"
       criterionType="props.criterion.type"
       disableFormulas="props.disableFormulas"
+      focused="props.autofocus"
     />
     <CriterionInput
       value="props.criterion.values[1]"
diff --git a/src/components/side_panel/criterion_form/single_input_criterion/single_input_criterion.xml b/src/components/side_panel/criterion_form/single_input_criterion/single_input_criterion.xml
@@ -5,6 +5,7 @@
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
       disableFormulas="props.disableFormulas"
+      focused="props.autofocus"
     />
   </t>
 </templates>
diff --git a/src/components/side_panel/criterion_form/value_in_list_criterion/value_in_list_criterion.ts b/src/components/side_panel/criterion_form/value_in_list_criterion/value_in_list_criterion.ts
@@ -15,6 +15,7 @@ export class ListCriterionForm extends CriterionForm<IsValueInListCriterion> {
 
   state = useState<State>({
     numberOfValues: Math.max(this.props.criterion.values.length, 2),
+    focusedValueIndex: this.props.autofocus ? 0 : undefined,
   });
 
   setup() {
diff --git a/src/components/side_panel/criterion_form/value_in_range_criterion/value_in_range_criterion.xml b/src/components/side_panel/criterion_form/value_in_range_criterion/value_in_range_criterion.xml
@@ -5,6 +5,7 @@
       onSelectionChanged="(ranges) => this.onRangeChanged(ranges[0])"
       required="true"
       hasSingleRange="true"
+      autofocus="props.autofocus"
     />
     <t t-foreach="values" t-as="value" t-key="value_index">
       <div class="o-dv-list-values p-1 d-flex align-items-center">
diff --git a/src/components/side_panel/data_validation/dv_editor/dv_editor.ts b/src/components/side_panel/data_validation/dv_editor/dv_editor.ts
@@ -33,6 +33,7 @@ interface Props {
 interface State {
   rule: DataValidationRuleData;
   errors: CancelledReason[];
+  isTypeUpdated: boolean;
 }
 
 export class DataValidationEditor extends Component<Props, SpreadsheetChildEnv> {
@@ -44,7 +45,11 @@ export class DataValidationEditor extends Component<Props, SpreadsheetChildEnv>
     onCloseSidePanel: { type: Function, optional: true },
   };
 
-  state = useState<State>({ rule: this.defaultDataValidationRule, errors: [] });
+  state = useState<State>({
+    rule: this.defaultDataValidationRule,
+    errors: [],
+    isTypeUpdated: false,
+  });
   private editingSheetId!: UID;
 
   setup() {
@@ -62,6 +67,7 @@ export class DataValidationEditor extends Component<Props, SpreadsheetChildEnv>
 
   onCriterionTypeChanged(type: DataValidationCriterionType) {
     this.state.rule.criterion.type = type;
+    this.state.isTypeUpdated = true;
   }
 
   onRangesChanged(ranges: string[]) {
diff --git a/src/components/side_panel/data_validation/dv_editor/dv_editor.xml b/src/components/side_panel/data_validation/dv_editor/dv_editor.xml
@@ -23,6 +23,7 @@
             t-key="state.rule.criterion.type"
             criterion="state.rule.criterion"
             onCriterionChanged.bind="onCriterionChanged"
+            autofocus="state.isTypeUpdated"
           />
         </div>
       </Section>
diff --git a/tests/data_validation/data_validation_generics_side_panel_component.test.ts b/tests/data_validation/data_validation_generics_side_panel_component.test.ts
@@ -141,6 +141,15 @@ describe("data validation sidePanel component", () => {
     ]);
   });
 
+  test("date input is focused when criterion type is changed", async () => {
+    await simulateClick(".o-dv-add");
+    expect(document.activeElement).not.toBe(fixture.querySelector(".o-dv-input .o-composer"));
+    await changeCriterionType("dateIs");
+    setInputValueAndTrigger(".o-dv-date-value", "exactDate");
+    expect(".o-dv-input .o-composer").toHaveClass("active");
+    expect(document.activeElement).toBe(fixture.querySelector(".o-dv-input .o-composer"));
+  });
+
   test("Invalid range", async () => {
     await simulateClick(".o-dv-add");
     await nextTick();
@@ -248,6 +257,28 @@ describe("data validation sidePanel component", () => {
     );
   });
 
+  test("single input is focused when changing type", async () => {
+    await simulateClick(".o-dv-add");
+    await nextTick();
+    expect(".o-dv-input .o-composer.active").toHaveCount(0);
+    await changeCriterionType("isEqualText");
+    expect(".o-dv-input .o-composer.active").toHaveCount(1);
+    expect(document.activeElement).toBe(fixture.querySelector(".o-dv-input .o-composer"));
+    expect(".o-dv-input .o-composer").toHaveClass("active");
+  });
+
+  test("first input of two is focused when changing type", async () => {
+    await simulateClick(".o-dv-add");
+    await nextTick();
+    expect(".o-dv-input .o-composer.active").toHaveCount(0);
+    await changeCriterionType("isBetween");
+    expect(".o-dv-input .o-composer.active").toHaveCount(1);
+    const composers = fixture.querySelectorAll(".o-dv-input .o-composer");
+    expect(document.activeElement).toBe(composers[0]);
+    expect(composers[0]).toHaveClass("active");
+    expect(composers[1]).not.toHaveClass("active");
+  });
+
   test("Can make the rule blocking", async () => {
     await simulateClick(".o-dv-add");
     await nextTick();
diff --git a/tests/data_validation/data_validation_list_component.test.ts b/tests/data_validation/data_validation_list_component.test.ts
@@ -82,6 +82,15 @@ describe("Edit criterion in side panel", () => {
       expect(inputs[0].innerText).toBe("hola");
     });
 
+    test("first input is focused when criterion type is changed", async () => {
+      expect(document.activeElement).not.toBe(fixture.querySelector(".o-dv-input input"));
+      await click(fixture, ".o-dv-type");
+      await click(fixture, `.o-menu-item[data-name="containsText"]`);
+      await click(fixture, ".o-dv-type");
+      await click(fixture, `.o-menu-item[data-name="isValueInList"]`);
+      expect(document.activeElement).toBe(fixture.querySelector(".o-dv-input input"));
+    });
+
     test("Can add a new value", async () => {
       await click(fixture, ".o-dv-list-add-value");
       const inputs = fixture.querySelectorAll<HTMLInputElement>(".o-dv-list-values .o-input");
@@ -202,6 +211,15 @@ describe("Edit criterion in side panel", () => {
       expect(getDataValidationRules(model)[0].criterion.values).toEqual(["B1:B9"]);
     });
 
+    test("range input is focused when criterion type is changed", async () => {
+      expect(".o-dv-settings .o-selection-input input").not.toHaveClass("o-focused");
+      await click(fixture, ".o-dv-type");
+      await click(fixture, `.o-menu-item[data-name="containsText"]`);
+      await click(fixture, ".o-dv-type");
+      await click(fixture, `.o-menu-item[data-name="isValueInRange"]`);
+      expect(".o-dv-settings .o-selection-input input").toHaveClass("o-focused");
+    });
+
     test("Can change display style", () => {
       const displayStyleInput = fixture.querySelector<HTMLInputElement>(".o-dv-display-style");
       setInputValueAndTrigger(displayStyleInput, "plainText");
