diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx
index adf059f46d5..8425c6659a4 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx
@@ -85,6 +85,16 @@ export const FilterButton = (props: FilterButtonProps): JSX.Element => {
     const handleShow = useCallback(
         ({ source, defaultValue }) => {
             showFilter(source, defaultValue === '' ? undefined : defaultValue);
+            // We have to fallback to imperative code because the new FilterFormInput
+            // has no way of knowing it has just been displayed (and thus that it should focus its input)
+            setTimeout(() => {
+                const inputElement = document.querySelector(
+                    `input[name='${source}']`
+                ) as HTMLInputElement;
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 50);
             setOpen(false);
         },
         [showFilter, setOpen]
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx b/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
index 8d1f8c3ba17..9b20c324812 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { IconButton } from '@mui/material';
-import ActionHide from '@mui/icons-material/HighlightOff';
+import ActionHide from '@mui/icons-material/RemoveCircleOutline';
 import clsx from 'clsx';
 import { useResourceContext, useTranslate } from 'ra-core';
 
@@ -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: filterElement.props.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,7 @@ export const FilterFormInput = props => {
                     <ActionHide />
                 </IconButton>
             )}
-            {React.cloneElement(filterElement, {
-                resource,
-                record: emptyRecord,
-                size: filterElement.props.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>
     );