automatically add item to basket on counter product search

counter/static/bundled/counter/components/counter-product-select-index.ts

@@ -1,6 +1,6 @@
-import type { RecursivePartial, TomSettings } from "tom-select/dist/types/types";
-import { AutoCompleteSelectBase } from "#core:core/components/ajax-select-base.ts";
-import { registerComponent } from "#core:utils/web-components.ts";
+import type { RecursivePartial, TomSettings } from "tom-select/src/types";
+import { AutoCompleteSelectBase } from "#core:core/components/ajax-select-base";
+import { registerComponent } from "#core:utils/web-components";
 
 const productParsingRegex = /^(\d+x)?(.*)/i;
 const codeParsingRegex = / \((\w+)\)$/;
@@ -63,13 +63,6 @@ export class CounterProductSelect extends AutoCompleteSelectBase {
         );
       },
     );
-
-    this.widget.hook("after", "onOptionSelect", () => {
-      /* Focus the next element if it's an input */
-      if (this.nextElementSibling.nodeName === "INPUT") {
-        (this.nextElementSibling as HTMLInputElement).focus();
-      }
-    });
   }
   protected tomSelectSettings(): RecursivePartial<TomSettings> {
     /* We disable the dropdown on focus because we're going to always autofocus the widget */
@@ -80,9 +73,7 @@ export class CounterProductSelect extends AutoCompleteSelectBase {
       // We need to manually set weights or it results on an inconsistent
       // behavior between production and development environment
       searchField: [
-        // @ts-expect-error documentation says it's fine, specified type is wrong
         { field: "code", weight: 2 },
-        // @ts-expect-error documentation says it's fine, specified type is wrong
         { field: "text", weight: 0.5 },
       ],
     };

counter/static/bundled/counter/counter-click-index.ts

@@ -25,6 +25,9 @@ document.addEventListener("alpine:init", () => {
       }
 
       this.codeField = this.$refs.codeField;
+      this.codeField.widget.hook("after", "onOptionSelect", () => {
+        this.handleCode();
+      });
       this.codeField.widget.focus();
 
       // It's quite tricky to manually apply attributes to the management part
@@ -154,6 +157,7 @@ document.addEventListener("alpine:init", () => {
         this.addToBasket(code, quantity);
       }
       this.codeField.widget.clear();
+      this.codeField.widget.setTextboxValue("");
       this.codeField.widget.focus();
     },
   }));

counter/templates/counter/counter_click.jinja

@@ -56,10 +56,15 @@
         <div class="accordion-content">
           {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
 
-          <form method="post" action=""
-                class="code_form" @submit.prevent="handleCode">
+          <form method="post" action="" class="code_form" @submit.prevent="handleCode">
 
-            <counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}">
+            <counter-product-select
+              name="code"
+              x-ref="codeField"
+              autofocus
+              required
+              placeholder="{% trans %}Select a product...{% endtrans %}"
+            >
               <option value=""></option>
               <optgroup label="{% trans %}Operations{% endtrans %}">
                 <option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option>
@@ -73,8 +78,6 @@
                 </optgroup>
               {%- endfor -%}
             </counter-product-select>
-
-            <input type="submit" value="{% trans %}Go{% endtrans %}"/>
           </form>
 
           {% for error in form.non_form_errors() %}