fix(ui): 🚸 keyboard tab focus on keystore related to #36

dashhive · Feb 11, 2024 · 4cc1303 · 4cc1303
1 parent 0b654d4
commit 4cc1303
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/src/components/dialog.js b/src/components/dialog.js
@@ -107,10 +107,24 @@ const initialState = {
       }
       event.target.reportValidity()
     },
-    handleFocus: state => event => {
+    handleBlur: state => event => {
       // event.preventDefault()
       // console.log(
-      //   'handle input focus',
+      //   'handle input blur',
+      //   event,
+      // )
+    },
+    handleFocusOut: state => event => {
+      // event.preventDefault()
+      // console.log(
+      //   'handle input focus out',
+      //   event,
+      // )
+    },
+    handleFocusIn: state => event => {
+      // event.preventDefault()
+      // console.log(
+      //   'handle input focus in',
       //   event,
       // )
     },
@@ -315,10 +329,20 @@ export async function setupDialog(
       )
     }
 
+    addListener(
+      form,
+      'blur',
+      state.events.handleBlur(state),
+    )
     addListener(
       form,
       'focusout',
-      state.events.handleFocus(state),
+      state.events.handleFocusOut(state),
+    )
+    addListener(
+      form,
+      'focusin',
+      state.events.handleFocusIn(state),
     )
     addListener(
       form,

diff --git a/src/rigs/phrase-import.js b/src/rigs/phrase-import.js
@@ -177,6 +177,16 @@ export let phraseImportRig = (async function (globals) {
       `,
       fields: html``,
       events: {
+        handleFocusOut: state => event => {
+          if (event.target.id === 'keystore') {
+            event.target.parentElement.classList.remove('focus')
+          }
+        },
+        handleFocusIn: state => event => {
+          if (event.target.id === 'keystore') {
+            event.target.parentElement.classList.add('focus')
+          }
+        },
         handleClose: (
           state,
           resolve = res=>{},

diff --git a/src/rigs/send-or-request.js b/src/rigs/send-or-request.js
@@ -279,7 +279,7 @@ export let sendOrReceiveRig = (async function (globals) {
             }
           }
         },
-        handleFocus: state => event => {
+        handleFocusOut: state => event => {
           // event.preventDefault()
           // console.log(
           //   'handle input focus',

diff --git a/src/styles/form.css b/src/styles/form.css
@@ -641,6 +641,9 @@ form[name="network"] {
 .updrop.drag-over {
   border-style: solid;
 }
+.updrop.focus{
+  border-style: dotted;
+}
 .dropped .updrop,
 .updrop.dropped {
   background-color: var(--dark-900);