m4theushw
commented
1 year ago The filter panel is based on the FocusTrap, previously named TrapFocus. When you click the filter button to open the panel, this component stores which element is focused (the button), then once the panel is closed it tries to restore the focus to the element it had saved. What is happening here is that when the date range picker input is focused, the filter panel understands that a click outside occurred and it should be closed. When it closes, FocusTrap restores the focus to the button, which for the date range picker means that the input lost focus and the calendar should be closed. A solution would be to use the disableRestoreFocus prop to disable the logic that restores the focus. The downside is that accessibility will be affected, as the active element once the panel is closed will be document.body and, e.g. pressing Tab, will focus a complete random element.
If this is acceptable, then we need to give the possibility of passing props to the FocusTrap used by the panel. This can be done with:
diff --git a/packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx b/packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx
index f738196ce..4701aa1bf 100644
--- a/packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx
+++ b/packages/grid/x-data-grid/src/components/panel/GridPanelWrapper.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import clsx from 'clsx';
-import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import TrapFocus, { TrapFocusProps } from '@mui/material/Unstable_TrapFocus';
import { styled, Theme } from '@mui/material/styles';
import { MUIStyledCommonProps } from '@mui/system';
import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -36,18 +36,20 @@ const GridPanelWrapperRoot = styled('div', {
const isEnabled = () => true;
export interface GridPanelWrapperProps
- extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>,
+ extends React.PropsWithChildren<
+ React.HTMLAttributes<HTMLDivElement> & { TrapFocusProps: Omit<TrapFocusProps, 'open'> }
+ >,
MUIStyledCommonProps<Theme> {}
const GridPanelWrapper = React.forwardRef<HTMLDivElement, GridPanelWrapperProps>(
function GridPanelWrapper(props, ref) {
- const { className, ...other } = props;
+ const { className, TrapFocusProps: TrapFocusPropsProps, ...other } = props;
const rootProps = useGridRootProps();
const ownerState = { classes: rootProps.classes };
const classes = useUtilityClasses(ownerState);
return (
- <TrapFocus open disableEnforceFocus isEnabled={isEnabled}>
+ <TrapFocus open disableEnforceFocus isEnabled={isEnabled} {...TrapFocusPropsProps}>
<GridPanelWrapperRoot
ref={ref}
tabIndex={-1}Then, disableRestoreFocus will be able to be used with:
<DataGrid
componentsProps={{ filterPanel: { TrapFocusProps: { disableRestoreFocus: true } } }}
/>Do you want to submit a PR with the diff above?
Vivek-Prajapatii
ayushcs
oliviertassinari
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/s/tender-shannon-2o3hv7
https://www.loom.com/share/eb4bd147cdb043139c30a055f0f9f842
Browser - Chrome, Firefox
Case 1 Steps:
Case 2 Steps:
Current behavior 😯
Opening the date range picker after the filter panel or column panel closes the date range picker automatically for the first time.
But this doesn't happens when density menu appears and date range picker is being opened
Expected behavior 🤔
Opening the date range picker after the filter panel or column panel should not close the date range picker automatically. It should behave the same way as when we toggle between different panels like filter, column, density, etc.
Context 🔦
I need to add a date range filter which is not related to the columns of the data grid. So inorder to achieve that i am using the date range picker component and placing it in the data grid toolbar.
Your environment 🌎
``` System: OS: macOS 12.6.1 Binaries: Node: 18.10.0 - ~/.nvm/versions/node/v18.10.0/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v18.10.0/bin/npm Browsers: Chrome: 106.0.5249.119 Edge: Not Found Firefox: 106.0.5 Safari: 16.1 npmPackages: @emotion/react: ^11.10.4 => 11.10.5 @emotion/styled: ^11.10.4 => 11.10.5 @mui/base: 5.0.0-alpha.103 @mui/core-downloads-tracker: 5.10.11 @mui/icons-material: ^5.10.6 => 5.10.9 @mui/material: ^5.10.6 => 5.10.11 @mui/private-theming: 5.10.9 @mui/styled-engine: 5.10.8 @mui/system: 5.10.10 @mui/types: 7.2.0 @mui/utils: 5.10.9 @mui/x-data-grid: 5.17.8 @mui/x-data-grid-pro: ^5.17.4 => 5.17.8 @mui/x-date-pickers: 5.0.9 @mui/x-date-pickers-pro: ^5.0.9 => 5.0.9 @mui/x-license-pro: 5.17.0 @types/react: ^18.0.20 => 18.0.24 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.8.3 => 4.8.4 ```npx @mui/envinfoOrder ID 💳 (optional)
No response