interface: track suspended element when leap loads

pkg/interface/src/logic/reducers/local.ts

@@ -3,7 +3,7 @@ import { StoreState } from '../../store/type';
 import { Cage } from '../../types/cage';
 import { LocalUpdate } from '../../types/local-update';
 
-type LocalState = Pick<StoreState, 'sidebarShown' | 'omniboxShown' | 'dark' | 'baseHash'>;
+type LocalState = Pick<StoreState, 'sidebarShown' | 'omniboxShown' | 'dark' | 'baseHash' | 'suspendedFocus'>;
 
 export default class LocalReducer<S extends LocalState> {
     reduce(json: Cage, state: S) {
@@ -24,6 +24,13 @@ export default class LocalReducer<S extends LocalState> {
     omniboxShown(obj: LocalUpdate, state: S) {
       if ('omniboxShown' in obj) {
           state.omniboxShown = !state.omniboxShown;
+          if (state.suspendedFocus) {
+            state.suspendedFocus.focus();
+            state.suspendedFocus = null;
+          } else {
+            state.suspendedFocus = document.activeElement;
+            document.activeElement?.blur();
+          }
       }
     }
 

pkg/interface/src/logic/store/store.ts

@@ -42,6 +42,7 @@ export default class GlobalStore extends BaseStore<StoreState> {
       connection: 'connected',
       sidebarShown: true,
       omniboxShown: false,
+      suspendedFocus: null,
       baseHash: null,
       invites: {},
       associations: {

pkg/interface/src/logic/store/type.ts

@@ -16,6 +16,7 @@ export interface StoreState {
   // local state
   sidebarShown: boolean;
   omniboxShown: boolean;
+  suspendedFocus: HTMLInputElement | null;
   dark: boolean;
   connection: ConnectionStatus;
   baseHash: string | null;

pkg/interface/src/views/apps/dojo/components/input.js

@@ -80,8 +80,11 @@ render() {
         {this.props.prompt}
       </span>
       <input
-        autoCorrect="false"
+        autocorrect="off"
-        autoFocus={true}
+        autocapitalize="off"
+        spellcheck="false"
+        tabindex="0"
+        wrap="off"
         className="mono ml1 flex-auto dib w-100"
         id="dojo"
         cursor={this.props.cursor}