From 7637d8cd62b608842e39412e1a9b86c8f2df8dcd Mon Sep 17 00:00:00 2001
From: Darin Kelkhoff <darin.kelkhoff@gmail.com>
Date: Fri, 21 Jul 2023 09:47:50 -0500
Subject: [PATCH] Auto-focus the text input

---
 src/qqq/components/query/CustomColumnsPanel.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/qqq/components/query/CustomColumnsPanel.tsx b/src/qqq/components/query/CustomColumnsPanel.tsx
index 44874e0..cb20ffe 100644
--- a/src/qqq/components/query/CustomColumnsPanel.tsx
+++ b/src/qqq/components/query/CustomColumnsPanel.tsx
@@ -31,7 +31,7 @@ import TextField from "@mui/material/TextField";
 import {GridColDef, GridSlotsComponentsProps, useGridApiContext, useGridSelector} from "@mui/x-data-grid-pro";
 import {GridColumnsPanelProps} from "@mui/x-data-grid/components/panel/GridColumnsPanel";
 import {gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector} from "@mui/x-data-grid/hooks/features/columns/gridColumnsSelector";
-import React, {createRef, forwardRef, useEffect, useReducer, useState} from "react";
+import React, {createRef, forwardRef, useEffect, useReducer, useRef, useState} from "react";
 
 declare module "@mui/x-data-grid"
 {
@@ -55,6 +55,9 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       const [, forceUpdate] = useReducer((x) => x + 1, 0);
       const someRef = createRef();
 
+      const textRef = useRef(null);
+      const [didInitialFocus, setDidInitialFocus] = useState(false)
+
       const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {});
       const openGroupsBecauseOfFilter = {} as { [name: string]: boolean };
       const [lastScrollTop, setLastScrollTop] = useState(0);
@@ -68,6 +71,15 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
 
       console.log(`Open groups: ${JSON.stringify(openGroups)}`);
 
+      if(!didInitialFocus)
+      {
+         if(textRef.current)
+         {
+            textRef.current.select();
+            setDidInitialFocus(true);
+         }
+      }
+
       if (props.tableMetaData.exposedJoins)
       {
          for (let i = 0; i < props.tableMetaData.exposedJoins.length; i++)
@@ -360,7 +372,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
       return (
          <Box className="custom-columns-panel" style={{width: "350px", height: "450px"}}>
             <Box height="55px" padding="5px" display="flex">
-               <TextField id="findColumn" label="Find column" placeholder="Column title" variant="standard" fullWidth={true}
+               <TextField inputRef={textRef} id="findColumn" label="Find column" placeholder="Column title" variant="standard" fullWidth={true}
                   value={filterText}
                   onChange={(event) => filterTextChanged(event)}
                ></TextField>