From d28b17f5d39a4270d04d14b435cfea07ec5eb483 Mon Sep 17 00:00:00 2001
From: roen-odoo <roen@odoo.com>
Date: Thu, 21 Apr 2022 13:29:43 +0000
Subject: [PATCH] [FIX] pos_gift_card: keep focus on the current input field

Current behavior:
When opening the giftcard popup in a PoS the focus would always
always go back to the first input field after typing in any other
input field.

Steps to reproduce:
- Install PoS and activate gift card
- Activate option "Scan an existing barcode and set a price"
- Start a PoS session
- Access the giftcard popup
- Select "Scan and set price on gift card"
- Type anything in the second input field
- The focus will go back on the first input field

opw-2825163

closes odoo/odoo#90081

X-original-commit: 84c129c7e05bb22e5dde272ab0a7cf8d4e1c2011
Signed-off-by: Grazioso Andrea (agr) <agr@odoo.com>
Signed-off-by: Engels Robin (roen) <roen@odoo.com>
---
 .../static/src/js/Popups/GiftCardPopup.js     | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/addons/pos_loyalty/static/src/js/Popups/GiftCardPopup.js b/addons/pos_loyalty/static/src/js/Popups/GiftCardPopup.js
index b6cdae2fd36..56196fced91 100644
--- a/addons/pos_loyalty/static/src/js/Popups/GiftCardPopup.js
+++ b/addons/pos_loyalty/static/src/js/Popups/GiftCardPopup.js
@@ -6,7 +6,7 @@ import { useBarcodeReader } from 'point_of_sale.custom_hooks';
 import Core from 'web.core';
 
 const _t = Core._t;
-const { useState } = owl;
+const { useState, onPatched, useComponent } = owl;
 
 export class GiftCardPopup extends AbstractAwaitablePopup {
     setup() {
@@ -42,6 +42,26 @@ export class GiftCardPopup extends AbstractAwaitablePopup {
         return this.state.code.trim();
     }
 
+    useAutoFocus(state) {
+        const component = useComponent();
+        let hasFocused = false;
+        function autofocus() {
+            if (!state.showMenu) {
+                // Should autofocus here but only if it hasn't autofocus yet.
+                if (!hasFocused) {
+                    const elem = component.el.querySelector(`.gift-card-input-code`);
+                    if (elem)
+                        elem.focus();
+                        hasFocused = true;
+                }
+            } else {
+                // When changing showBarcodeGeneration to false, we reset hasFocused.
+                hasFocused = false;
+            }
+        }
+        onPatched(autofocus);
+    }
+
     switchToMenu() {
         this.state.showMenu = true;
         this.state.context = '';