Fix ColumnsButton produce invalid HTML when adding the filter input

Author: djhi

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

@@ -8,8 +8,8 @@ import {
     Tooltip,
     IconButton,
     Popover,
-    MenuList,
     PopoverOrigin,
+    Box,
 } from '@mui/material';
 import { useRtl } from '@mui/system/RtlProvider';
 import ViewWeekIcon from '@mui/icons-material/ViewWeek';
@@ -103,9 +103,9 @@ export const ColumnsButton = (inProps: ColumnsButtonProps) => {
                 transformOrigin={isRtl ? RTL_ORIGIN : LTR_ORIGIN}
             >
                 {/* ColumnsSelector will be rendered here via Portal  */}
-                <MenuList
-                    sx={{ px: 1, my: 0, minWidth: 200 }}
+                <Box
                     id={`${storeKey}-columnsSelector`}
+                    sx={{ px: 1, my: 0, minWidth: 200 }}
                 />
             </Popover>
         </Root>

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
     );
 };