Fix code entry focus on init

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

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

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);
 }

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: [

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