Merge pull request #11114 from marmelab/fix-columnselector-col-order

[Fix] Keep `ColumnsSelector` search input fixed above menu list

Author: djhi

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

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

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

@@ -67,9 +67,9 @@ export const ColumnsSelector = ({ children }: ColumnsSelectorProps) => {
     const shouldDisplaySearchInput = childrenArray.length > 5;
 
     return createPortal(
-        <MenuList>
+        <Box sx={{ pt: 1 }}>
             {shouldDisplaySearchInput ? (
-                <Box component="li" tabIndex={-1}>
+                <Box sx={{ mb: 1 }}>
                     <ResettableTextField
                         hiddenLabel
                         label=""
@@ -94,39 +94,40 @@ export const ColumnsSelector = ({ children }: ColumnsSelectorProps) => {
                         resettable
                         autoFocus
                         size="small"
-                        sx={{ mb: 1 }}
                     />
                 </Box>
             ) : null}
-            {paddedColumnRanks.map((position, index) => (
-                <DataTableColumnRankContext.Provider
-                    value={position}
-                    key={index}
-                >
-                    <DataTableColumnFilterContext.Provider
-                        value={columnFilter}
+            <MenuList sx={{ pt: 0 }}>
+                {paddedColumnRanks.map((position, index) => (
+                    <DataTableColumnRankContext.Provider
+                        value={position}
                         key={index}
                     >
-                        {childrenArray[position]}
-                    </DataTableColumnFilterContext.Provider>
-                </DataTableColumnRankContext.Provider>
-            ))}
-            <Box
-                component="li"
-                className="columns-selector-actions"
-                sx={{ textAlign: 'center', mt: 1 }}
-            >
-                <Button
-                    onClick={() => {
-                        setColumnRanks(undefined);
-                        setHiddenColumns(defaultHiddenColumns);
-                    }}
-                    label={translate('ra.action.reset', {
-                        _: 'Reset',
-                    })}
-                />
-            </Box>
-        </MenuList>,
+                        <DataTableColumnFilterContext.Provider
+                            value={columnFilter}
+                            key={index}
+                        >
+                            {childrenArray[position]}
+                        </DataTableColumnFilterContext.Provider>
+                    </DataTableColumnRankContext.Provider>
+                ))}
+                <Box
+                    component="li"
+                    className="columns-selector-actions"
+                    sx={{ textAlign: 'center', mt: 1 }}
+                >
+                    <Button
+                        onClick={() => {
+                            setColumnRanks(undefined);
+                            setHiddenColumns(defaultHiddenColumns);
+                        }}
+                        label={translate('ra.action.reset', {
+                            _: 'Reset',
+                        })}
+                    />
+                </Box>
+            </MenuList>
+        </Box>,
         container
     );
 };