focus system refactored

src/App.jsx

@@ -31,8 +31,6 @@ function App() {
   const resetStore = useReset()
   // ---
 
-  const inputRef = useRef(null)
-
   const [showSettings, setShowSettings] = useState(false)
   const [showReset, setShowReset] = useState(false)
 
@@ -132,7 +130,7 @@ function App() {
                     animate={{ opacity: 1 }} 
                     exit={redirected || { opacity: 0 }}>
                       <ActiveElements/>
-                      <QueryField ref={inputRef}/>
+                      <QueryField/>
                       <LayoutButton
                         id='settings'
                         style={{ right: 0, top: 0 }}

src/chatGPT/createCompletion.js

@@ -9,9 +9,7 @@ const PARAMS = {
 
 function createCompletion(stateSetter, messages, temperature, key, endCallback) {
   const controller = new AbortController()
-
-  console.log(messages);
-
+
   fetch(API_URL, {
     signal: controller.signal,
     method: 'POST',

src/components/AIcompletion/AIcompletion.jsx

@@ -49,8 +49,8 @@ function AIcompletion({ query, className }) {
     return null
 
   return <>
-    <Icon className={classes['icon']}/>
-    <div className={className}>
+    <Icon className={classes['icon']} onClick={e => e.stopPropagation()}/>
+    <div className={className} onClick={e => e.stopPropagation()}>
       <div className={classes['md-container']}>
         <ReactMarkdown children={completion}/> 
       </div>

src/components/AIcompletion/AIcompletion.module.css

@@ -2,9 +2,7 @@
   margin-right: 1em;  
 }
 .md-container * {
-  /*
-    user-select: text !important;
-  */
+  user-select: text !important;
 }
 .md-container code {
   backdrop-filter: contrast(0.8);

src/components/QueryField/QueryField.jsx

@@ -1,4 +1,4 @@
-import { useContext, useCallback, useEffect, memo, forwardRef, useRef } from 'react'
+import { useContext, useCallback, useEffect, memo, useRef } from 'react'
 import useSuggestions from '../../hooks/useSuggestions'
 import useParseQuery from '../../hooks/useParseQuery'
 import useRedirect from '../../hooks/useRedirect'
@@ -15,7 +15,7 @@ import { useState } from 'react'
 
 const DOUBLE_PRESS_THRESHOLD = 300
 
-const QueryField = forwardRef((props, inputRef) => {
+function QueryField () {
   // settings
   const settings = useContext(SettingsContext)
 
@@ -24,6 +24,8 @@ const QueryField = forwardRef((props, inputRef) => {
   const suggestionsFontSize = settings.query.suggestions.fontSize
   const enableCarret = settings.query.field.caret
 
+  const inputRef = useRef(null)
+
   /* store */
   const mode = useStateSelector(store => store.mode)
   const query = useStateSelector(store => store.query)
@@ -106,24 +108,40 @@ const QueryField = forwardRef((props, inputRef) => {
 
   const spacebarLastPressRef = useRef(-1)
   const onKeyPress = useCallback((e) => {
-    if (e.code === 'Space') {
-      if (Date.now() - spacebarLastPressRef.current < DOUBLE_PRESS_THRESHOLD)
-        setAiQuery(query)
+    if (allowedModes.get('QueryField').has(mode)) {
+      if (e.code === 'Space') {
+        if (Date.now() - spacebarLastPressRef.current < DOUBLE_PRESS_THRESHOLD)
+          setAiQuery(query)
 
-      spacebarLastPressRef.current = Date.now()
+        spacebarLastPressRef.current = Date.now()
+      }
+
+      if (document.activeElement !== inputRef.current)
+        inputRef.current.focus()
     }
-  }, [query])
+  }, [query, mode])
   // onKeyPress listener
   useEffect(() => {
     window.addEventListener('keypress', onKeyPress)
     return () => window.removeEventListener('keypress', onKeyPress)    
   }, [onKeyPress])
 
+  // focus grabber
+  useEffect(() => {
+    const grabFocus = () => {
+      if (document.activeElement !== inputRef.current)
+        inputRef.current.focus()
+    }
+
+    document.addEventListener('click', grabFocus)
+    return () => document.removeEventListener('click', grabFocus)    
+  }, [])
+
   // re-focusing the input inputField to focus on the caret
   useEffect(() => {
     inputRef.current.blur()
     inputRef.current.focus()
-  }, [inputRef])
+  }, [])
 
   // css variables
   const variables = {
@@ -134,7 +152,6 @@ const QueryField = forwardRef((props, inputRef) => {
   const input = <input 
     ref={inputRef}
     value={parsedQuery.value}
-    onBlur={e => setTimeout(() => e.target.focus(), 0)}
     className={gC(classes['field'], !selectedSuggestion && classes['selected'])}
     onChange={e => handleQueryChange(e.target.value)}
     style={{
@@ -157,8 +174,7 @@ const QueryField = forwardRef((props, inputRef) => {
             setSelected={suggestion => updateStore({ selectedSuggestion: suggestion })}/> }
     </div>
   )
-})
-QueryField.displayName = 'QueryField'
+}
 
 function getSuggestion(suggestions, selectedSuggestion, option) {
   // current index