QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 05:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Auto-focus the text input

Browse Source
This commit is contained in:
darin.kelkhoff
2023-07-21 09:47:50 -05:00
parent ab563c1d93
commit 7637d8cd62
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/qqq/components/query/CustomColumnsPanel.tsx
View File

@ -31,7 +31,7 @@ import TextField from "@mui/material/TextField";
import {GridColDef, GridSlotsComponentsProps, useGridApiContext, useGridSelector} from "@mui/x-data-grid-pro"; import {GridColDef, GridSlotsComponentsProps, useGridApiContext, useGridSelector} from "@mui/x-data-grid-pro";
import {GridColumnsPanelProps} from "@mui/x-data-grid/components/panel/GridColumnsPanel"; import {GridColumnsPanelProps} from "@mui/x-data-grid/components/panel/GridColumnsPanel";
import {gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector} from "@mui/x-data-grid/hooks/features/columns/gridColumnsSelector"; 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" declare module "@mui/x-data-grid"
{ {
@ -55,6 +55,9 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
const [, forceUpdate] = useReducer((x) => x + 1, 0); const [, forceUpdate] = useReducer((x) => x + 1, 0);
const someRef = createRef(); const someRef = createRef();
const textRef = useRef(null);
const [didInitialFocus, setDidInitialFocus] = useState(false)
const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {}); const [openGroups, setOpenGroups] = useState(props.initialOpenedGroups || {});
const openGroupsBecauseOfFilter = {} as { [name: string]: boolean }; const openGroupsBecauseOfFilter = {} as { [name: string]: boolean };
const [lastScrollTop, setLastScrollTop] = useState(0); const [lastScrollTop, setLastScrollTop] = useState(0);
@ -68,6 +71,15 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
console.log(`Open groups: ${JSON.stringify(openGroups)}`); console.log(`Open groups: ${JSON.stringify(openGroups)}`);
if(!didInitialFocus)
{
if(textRef.current)
{
textRef.current.select();
setDidInitialFocus(true);
}
}
if (props.tableMetaData.exposedJoins) if (props.tableMetaData.exposedJoins)
{ {
for (let i = 0; i < props.tableMetaData.exposedJoins.length; i++) for (let i = 0; i < props.tableMetaData.exposedJoins.length; i++)
@ -360,7 +372,7 @@ export const CustomColumnsPanel = forwardRef<any, GridColumnsPanelProps>(
return ( return (
<Box className="custom-columns-panel" style={{width: "350px", height: "450px"}}> <Box className="custom-columns-panel" style={{width: "350px", height: "450px"}}>
<Box height="55px" padding="5px" display="flex"> <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} value={filterText}
onChange={(event) => filterTextChanged(event)} onChange={(event) => filterTextChanged(event)}
></TextField> ></TextField>