Feat: move remove filter button and display it on hover

docs/FilteringTutorial.md

@@ -141,7 +141,7 @@ import { Chip } from '@mui/material';
 
 const QuickFilter = ({ label }) => {
     const translate = useTranslate();
-    return <Chip sx={{ marginBottom: 1 }} label={translate(label)} />;
+    return <Chip sx={{ marginBottom: 1 }} label={translate(label)} clickable />;
 };
 
 const postFilters = [
@@ -153,7 +153,9 @@ const postFilters = [
 ```
 {% endraw %}
 
-**Tip**: It's currently not possible to use two quick filters for the same source. 
+**Tip**: Notice we have set the `clickable` prop on the `<Chip>`. This is an accessibility good practice. Indeed this allows the element to be focusable, and hence allows to remove the filter using only the keyboard.
+
+**Tip**: It's currently not possible to use two quick filters for the same source.
 
 ## The `<FilterList>` Sidebar
 

examples/demo/src/products/ProductList.tsx

@@ -50,7 +50,7 @@ const ProductList = () => {
 
 const QuickFilter = ({ label }: InputProps) => {
     const translate = useTranslate();
-    return <Chip sx={{ mb: 1 }} label={translate(label as string)} />;
+    return <Chip sx={{ mb: 1 }} label={translate(label as string)} clickable />;
 };
 
 export const productFilters = [

examples/simple/src/posts/PostList.tsx

@@ -36,7 +36,7 @@ export const PostIcon = BookIcon;
 
 const QuickFilter = ({ label, source, defaultValue }) => {
     const translate = useTranslate();
-    return <Chip sx={{ marginBottom: 1 }} label={translate(label)} />;
+    return <Chip sx={{ marginBottom: 1 }} label={translate(label)} clickable />;
 };
 
 const postFilter = [

packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx

@@ -16,6 +16,14 @@ export const FilterFormInput = props => {
             data-source={filterElement.props.source}
             className={clsx('filter-field', className)}
         >
+            {React.cloneElement(filterElement, {
+                resource,
+                record: emptyRecord,
+                size: 'small',
+                helperText: false,
+                // ignore defaultValue in Field because it was already set in Form (via mergedInitialValuesWithDefaultValues)
+                defaultValue: undefined,
+            })}
             {!filterElement.props.alwaysOn && (
                 <IconButton
                     className={clsx(
@@ -30,14 +38,6 @@ export const FilterFormInput = props => {
                     <ActionHide />
                 </IconButton>
             )}
-            {React.cloneElement(filterElement, {
-                resource,
-                record: emptyRecord,
-                size: 'small',
-                helperText: false,
-                // ignore defaultValue in Field because it was already set in Form (via mergedInitialValuesWithDefaultValues)
-                defaultValue: undefined,
-            })}
             <div className={FilterFormInputClasses.spacer}>&nbsp;</div>
         </Root>
     );
@@ -64,10 +64,23 @@ const Root = styled('div', {
     display: 'flex',
     alignItems: 'flex-end',
     pointerEvents: 'auto',
+    position: 'relative',
+    '@media (hover: hover)': {
+        '&:not(:hover, :focus, :active, :focus-visible, :focus-within)': {
+            [`& .${FilterFormInputClasses.hideButton}`]: {
+                visibility: 'hidden',
+            },
+        },
+    },
 
     [`& .${FilterFormInputClasses.spacer}`]: { width: theme.spacing(2) },
     [`& .${FilterFormInputClasses.hideButton}`]: {
         marginBottom: theme.spacing(1),
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        zIndex: 10,
+        display: 'flex',
     },
 }));