Merge pull request #10869 from marmelab/fix-columns-button-keyboard-usage

Fix `<ColumnsButton>` cannot be used with keyboard

Author: Madeorsk

packages/ra-ui-materialui/src/list/datatable/ColumnsButton.spec.tsx

@@ -29,7 +29,7 @@ describe('ColumnsButton', () => {
             screen
                 .getByRole('menu')
                 .querySelectorAll('li:not(.columns-selector-actions)')
-        ).toHaveLength(7);
+        ).toHaveLength(8); // 7 columns + the filter input li
         // Typing a filter
         fireEvent.change(
             screen.getByPlaceholderText('ra.action.search_columns'),
@@ -43,7 +43,7 @@ describe('ColumnsButton', () => {
                 screen
                     .getByRole('menu')
                     .querySelectorAll('li:not(.columns-selector-actions)')
-            ).toHaveLength(1);
+            ).toHaveLength(2); // only the column with 'DiA' in its label should remain + the filter input li
         });
         screen.getByLabelText('Téstïng diàcritics');
         // Clear the filter
@@ -53,7 +53,7 @@ describe('ColumnsButton', () => {
                 screen
                     .getByRole('menu')
                     .querySelectorAll('li:not(.columns-selector-actions)')
-            ).toHaveLength(7);
+            ).toHaveLength(8);
         });
     });
 });

packages/ra-ui-materialui/src/list/datatable/ColumnsButton.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { useTranslate, useResourceContext } from 'ra-core';
 import {
-    Box,
     Button,
     type ButtonProps,
-    Menu,
     useMediaQuery,
     Theme,
     Tooltip,
     IconButton,
+    Popover,
+    PopoverOrigin,
+    Box,
 } from '@mui/material';
+import { useRtl } from '@mui/system/RtlProvider';
 import ViewWeekIcon from '@mui/icons-material/ViewWeek';
 import {
     type ComponentsOverrides,
@@ -49,7 +51,7 @@ export const ColumnsButton = (inProps: ColumnsButtonProps) => {
     const storeKey = props.storeKey || `${resource}.datatable`;
 
     const [anchorEl, setAnchorEl] = React.useState(null);
-
+    const isRtl = useRtl();
     const translate = useTranslate();
     const isXSmall = useMediaQuery((theme: Theme) =>
         theme.breakpoints.down('sm')
@@ -89,23 +91,37 @@ export const ColumnsButton = (inProps: ColumnsButtonProps) => {
                     {title}
                 </Button>
             )}
-            <Menu
+            <Popover
                 open={Boolean(anchorEl)}
                 keepMounted
                 anchorEl={anchorEl}
                 onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: isRtl ? 'right' : 'left',
+                }}
+                transformOrigin={isRtl ? RTL_ORIGIN : LTR_ORIGIN}
             >
                 {/* ColumnsSelector will be rendered here via Portal  */}
                 <Box
-                    component="ul"
-                    sx={{ px: 1, my: 0, minWidth: 200 }}
                     id={`${storeKey}-columnsSelector`}
+                    sx={{ px: 1, my: 0, minWidth: 200 }}
                 />
-            </Menu>
+            </Popover>
         </Root>
     );
 };
 
+const RTL_ORIGIN: PopoverOrigin = {
+    vertical: 'top',
+    horizontal: 'right',
+};
+
+const LTR_ORIGIN: PopoverOrigin = {
+    vertical: 'top',
+    horizontal: 'left',
+};
+
 const PREFIX = 'RaColumnsButton';
 const Root = styled('span', {
     name: PREFIX,

packages/ra-ui-materialui/src/list/datatable/ColumnsSelector.tsx

@@ -8,7 +8,7 @@ import {
     useTranslate,
     DataTableColumnFilterContext,
 } from 'ra-core';
-import { Box, InputAdornment } from '@mui/material';
+import { Box, InputAdornment, MenuList } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
 import { Button } from '../../button';
@@ -67,34 +67,36 @@ export const ColumnsSelector = ({ children }: ColumnsSelectorProps) => {
     const shouldDisplaySearchInput = childrenArray.length > 5;
 
     return createPortal(
-        <>
+        <MenuList>
             {shouldDisplaySearchInput ? (
-                <ResettableTextField
-                    hiddenLabel
-                    label=""
-                    value={columnFilter}
-                    onChange={e => {
-                        if (typeof e === 'string') {
-                            setColumnFilter(e);
-                            return;
-                        }
-                        setColumnFilter(e.target.value);
-                    }}
-                    placeholder={translate('ra.action.search_columns', {
-                        _: 'Search columns',
-                    })}
-                    InputProps={{
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <SearchIcon color="disabled" />
-                            </InputAdornment>
-                        ),
-                    }}
-                    resettable
-                    autoFocus
-                    size="small"
-                    sx={{ mb: 1 }}
-                />
+                <Box component="li" tabIndex={-1}>
+                    <ResettableTextField
+                        hiddenLabel
+                        label=""
+                        value={columnFilter}
+                        onChange={e => {
+                            if (typeof e === 'string') {
+                                setColumnFilter(e);
+                                return;
+                            }
+                            setColumnFilter(e.target.value);
+                        }}
+                        placeholder={translate('ra.action.search_columns', {
+                            _: 'Search columns',
+                        })}
+                        InputProps={{
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <SearchIcon color="disabled" />
+                                </InputAdornment>
+                            ),
+                        }}
+                        resettable
+                        autoFocus
+                        size="small"
+                        sx={{ mb: 1 }}
+                    />
+                </Box>
             ) : null}
             {paddedColumnRanks.map((position, index) => (
                 <DataTableColumnRankContext.Provider
@@ -123,7 +125,7 @@ export const ColumnsSelector = ({ children }: ColumnsSelectorProps) => {
                     Reset
                 </Button>
             </Box>
-        </>,
+        </MenuList>,
         container
     );
 };

packages/ra-ui-materialui/src/preferences/FieldToggle.tsx

@@ -102,6 +102,7 @@ export const FieldToggle = (props: FieldToggleProps) => {
     return (
         <Root
             key={source}
+            role="option"
             draggable={onMove ? 'true' : undefined}
             onDrag={onMove ? handleDrag : undefined}
             onDragStart={onMove ? handleDragStart : undefined}