[IMP] dv: autofocus input

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

Author: LucasLefevre

src/components/composer/standalone_composer/standalone_composer.ts

@@ -1,4 +1,4 @@
-import { Component } from "@odoo/owl";
+import { Component, onMounted } from "@odoo/owl";
 import { Token } from "../../../formulas";
 import { AutoCompleteProviderDefinition } from "../../../registries/auto_completes";
 import { Store, useLocalStore, useStore } from "../../../store_engine";
@@ -20,6 +20,7 @@ interface Props {
   title?: string;
   class?: string;
   invalid?: boolean;
+  autofocus?: boolean;
   getContextualColoredSymbolToken?: (token: Token) => Color;
 }
 
@@ -35,6 +36,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 };
@@ -68,6 +70,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 {

src/components/selection_input/selection_input.ts

@@ -11,6 +11,7 @@ interface Props {
   ranges: string[];
   hasSingleRange?: boolean;
   required?: boolean;
+  autofocus?: boolean;
   isInvalid?: boolean;
   class?: string;
   onSelectionChanged?: (ranges: string[]) => void;
@@ -49,6 +50,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 },
@@ -104,6 +106,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();

src/components/side_panel/criterion_form/criterion_form.ts

@@ -1,4 +1,4 @@
-import { Component, onMounted } from "@odoo/owl";
+import { Component } from "@odoo/owl";
 import { useStore } from "../../../store_engine";
 import { GenericCriterion, SpreadsheetChildEnv } from "../../../types";
 import { ComposerFocusStore } from "../../composer/composer_focus_store";
@@ -7,6 +7,7 @@ interface Props<T extends GenericCriterion> {
   criterion: T;
   onCriterionChanged: (criterion: T) => void;
   disableFormulas?: boolean;
+  autofocus?: boolean;
 }
 
 export abstract class CriterionForm<
@@ -16,12 +17,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>) {

src/components/side_panel/criterion_form/criterion_input/criterion_input.ts

@@ -40,8 +40,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]
@@ -93,6 +93,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,
     };
   }
 

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>

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]"

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>

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() {

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">

src/components/side_panel/data_validation/dv_editor/dv_editor.ts

@@ -32,6 +32,7 @@ interface Props {
 interface State {
   rule: DataValidationRuleData;
   errors: CancelledReason[];
+  isTypeUpdated: boolean;
 }
 
 export class DataValidationEditor extends Component<Props, SpreadsheetChildEnv> {
@@ -43,7 +44,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,
+  });
 
   setup() {
     if (this.props.rule) {
@@ -60,6 +65,7 @@ export class DataValidationEditor extends Component<Props, SpreadsheetChildEnv>
 
   onCriterionTypeChanged(type: DataValidationCriterionType) {
     this.state.rule.criterion.type = type;
+    this.state.isTypeUpdated = true;
   }
 
   onRangesChanged(ranges: string[]) {