move event listener to root element

Author: KenanYusuf

docs/data/data-grid/components/quick-filter/GridControlledQuickFilter.js

@@ -8,6 +8,7 @@ import {
   QuickFilterControl,
   QuickFilterClear,
   QuickFilterTrigger,
+  useGridApiContext,
 } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import TextField from '@mui/material/TextField';
@@ -42,17 +43,21 @@ const StyledTextField = styled(TextField)(({ theme, ownerState }) => ({
 
 function CustomToolbar() {
   const [expanded, setExpanded] = React.useState(false);
+  const apiRef = useGridApiContext();
 
   React.useEffect(() => {
+    const rootElement = apiRef.current.rootElementRef.current;
+
     const handleKeyDown = (event) => {
-      if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === 'p') {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+        event.preventDefault();
         setExpanded(true);
       }
     };
 
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
+    rootElement?.addEventListener('keydown', handleKeyDown);
+    return () => rootElement?.removeEventListener('keydown', handleKeyDown);
+  }, [apiRef]);
 
   return (
     <Toolbar>

docs/data/data-grid/components/quick-filter/GridControlledQuickFilter.tsx

@@ -8,6 +8,7 @@ import {
   QuickFilterControl,
   QuickFilterClear,
   QuickFilterTrigger,
+  useGridApiContext,
 } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import TextField from '@mui/material/TextField';
@@ -50,17 +51,21 @@ const StyledTextField = styled(TextField)<{
 
 function CustomToolbar() {
   const [expanded, setExpanded] = React.useState(false);
+  const apiRef = useGridApiContext();
 
   React.useEffect(() => {
+    const rootElement = apiRef.current.rootElementRef.current;
+
     const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === 'p') {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+        event.preventDefault();
         setExpanded(true);
       }
     };
 
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
+    rootElement?.addEventListener('keydown', handleKeyDown);
+    return () => rootElement?.removeEventListener('keydown', handleKeyDown);
+  }, [apiRef]);
 
   return (
     <Toolbar>

docs/data/data-grid/components/quick-filter/quick-filter.md

@@ -70,7 +70,7 @@ The quick filter is uncontrolled by default and can be toggled via the trigger.
 
 ### Expand quick filter via keyboard
 
-The demo below shows how to control the quick filter state using the `expanded` and `onExpandedChange` props to support expanding the quick filter via keyboard. Try pressing <kbd class="key">Cmd</kbd> (or <kbd class="key">Ctrl</kbd> on Windows)+<kbd class="key">Shift</kbd>+<kbd class="key">P</kbd>.
+The demo below shows how to control the quick filter state using the `expanded` and `onExpandedChange` props to support expanding the quick filter via keyboard. You can try it by clicking on any cell to ensure the data grid has focus, and then pressing <kbd class="key">Cmd</kbd> (or <kbd class="key">Ctrl</kbd> on Windows)+<kbd class="key">P</kbd>.
 
 {{"demo": "GridControlledQuickFilter.js", "bg": "inline", "defaultCodeOpen": false}}