From f9c5a688b1f93cd548dc06c50f7f7673099fd9d3 Mon Sep 17 00:00:00 2001
From: KernelDeimos <eric.alex.dube@gmail.com>
Date: Fri, 3 May 2024 02:05:31 -0400
Subject: [PATCH] Fix code entry focus on init

---
 src/UI/Components/CodeEntryView.js |  6 ++++--
 src/UI/Components/StepView.js      |  5 +++++
 src/UI/UIComponentWindow.js        |  2 ++
 src/UI/UIWindow2FASetup.js         |  6 +++++-
 src/util/Component.js              | 30 ++++++++++++++++++++++++++++++
 5 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/UI/Components/CodeEntryView.js b/src/UI/Components/CodeEntryView.js
index 3e647610..13b5c69c 100644
--- a/src/UI/Components/CodeEntryView.js
+++ b/src/UI/Components/CodeEntryView.js
@@ -68,6 +68,10 @@ export default class CodeEntryView extends Component {
         `);
     }
 
+    on_focus () {
+        $(this.dom_).find('.digit-input').first().focus();
+    }
+
     on_ready ({ listen }) {
         let is_checking_code = false;
 
@@ -76,8 +80,6 @@ export default class CodeEntryView extends Component {
             $(this.dom_).find('.error').text(error).show();
         });
 
-        $(this.dom_).find('.digit-input').first().focus();
-
         $(this.dom_).find('.code-confirm-btn').on('click submit', function(e){
             e.preventDefault();
             e.stopPropagation();
diff --git a/src/UI/Components/StepView.js b/src/UI/Components/StepView.js
index 4f8dadec..080b9201 100644
--- a/src/UI/Components/StepView.js
+++ b/src/UI/Components/StepView.js
@@ -19,6 +19,10 @@ export default class StepView extends Component {
         `);
     }
 
+    on_focus () {
+        this.children[this.get('position')].focus();
+    }
+
     on_ready ({ listen }) {
         for ( const child of this.get('children') ) {
             child.setAttribute('slot', 'inside');
@@ -38,6 +42,7 @@ export default class StepView extends Component {
 
             // show the child at the current position
             $(this.children[position]).show();
+            this.children[position].focus();
         });
 
         // now that we're ready, show the wrapper
diff --git a/src/UI/UIComponentWindow.js b/src/UI/UIComponentWindow.js
index 4c9bc40f..93d41e01 100644
--- a/src/UI/UIComponentWindow.js
+++ b/src/UI/UIComponentWindow.js
@@ -48,4 +48,6 @@ export default async function UIComponentWindow (options) {
     })
 
     options.component.attach(placeholder);
+    options.component.focus();
+    console.log('UIComponentWindow', options.component);
 }
diff --git a/src/UI/UIWindow2FASetup.js b/src/UI/UIWindow2FASetup.js
index a088a245..0ff378b7 100644
--- a/src/UI/UIWindow2FASetup.js
+++ b/src/UI/UIWindow2FASetup.js
@@ -67,6 +67,7 @@ const UIWindow2FASetup = async function UIWindow2FASetup () {
                             value: data.url,
                         }),
                         new CodeEntryView({
+                            _ref: me => code_entry = me,
                             async [`property.value`] (value, { component }) {
                                 console.log('value? ', value)
 
@@ -78,7 +79,10 @@ const UIWindow2FASetup = async function UIWindow2FASetup () {
                                 stepper.next();
                             }
                         }),
-                    ]
+                    ],
+                    ['event.focus'] () {
+                        code_entry.focus();
+                    }
                 }),
                 new Flexer({
                     children: [
diff --git a/src/util/Component.js b/src/util/Component.js
index 52d48c1e..5ef71472 100644
--- a/src/util/Component.js
+++ b/src/util/Component.js
@@ -42,6 +42,36 @@ export class Component extends HTMLElement {
         if ( property_values && property_values.hasOwnProperty('_ref') ) {
             property_values._ref(this);
         }
+
+        // Setup focus handling
+        if ( property_values && property_values[`event.focus`] ) {
+            const on_focus_ = this.on_focus;
+            this.on_focus = (...a) => {
+                property_values[`event.focus`]();
+                on_focus_ && on_focus_(...a);
+            }
+        }
+        this.addEventListener('focus', () => {
+            console.log('got the event?');
+            if ( this.on_focus ) {
+                this.on_focus();
+            }
+        });
+    }
+
+    focus () {
+        super.focus();
+        // Apparently the 'focus' event only fires when the element is focused
+        // by other means than calling .focus() on it, so this isn't redundant.
+
+        // We use a 0ms timeout to ensure that the focus event has been
+        // processed before we call on_focus, which may rely on the focus
+        // event having been processed (and typically does).
+        setTimeout(() => {
+            if ( this.on_focus ) {
+                this.on_focus();
+            }
+        }, 0);
     }
 
     get (key) {