Add emptyText prop to SelectArrayInput with tests and documentatio

examples/ra-offline/package.json

@@ -42,4 +42,4 @@
     "vite-plugin-pwa": "^1.2.0"
   },
   "name": "ra-offline"
-}
+}

packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx

@@ -31,6 +31,31 @@ describe('<SelectArrayInput />', () => {
         ],
     };
 
+    it('should render emptyText as a disabled MenuItem when provided', () => {
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <ResourceContextProvider value="posts">
+                    <SimpleForm onSubmit={jest.fn()}>
+                        <SelectArrayInput
+                            {...defaultProps}
+                            emptyText="No selection available"
+                        />
+                    </SimpleForm>
+                </ResourceContextProvider>
+            </AdminContext>
+        );
+        fireEvent.mouseDown(
+            screen.getByLabelText('resources.posts.fields.categories')
+        );
+        // The emptyText should be rendered as a disabled MenuItem
+        const emptyMenuItem = screen.getByText('No selection available');
+        expect(emptyMenuItem).toBeInTheDocument();
+        expect(emptyMenuItem.closest('li')).toHaveAttribute(
+            'aria-disabled',
+            'true'
+        );
+    });
+
     it('should use a mui Select', () => {
         render(
             <AdminContext dataProvider={testDataProvider()}>

packages/ra-ui-materialui/src/input/SelectArrayInput.tsx

@@ -89,6 +89,14 @@ import { Labeled } from '../Labeled';
  *    { id: 'lifestyle', name: 'myroot.tags.lifestyle' },
  *    { id: 'photography', name: 'myroot.tags.photography' },
  * ];
+ *
+ * You can provide an `emptyText` prop to display a disabled placeholder at the top of the dropdown:
+ * @example
+ * <SelectArrayInput
+ *    source="tags"
+ *    choices={choices}
+ *    emptyText="No tags available"
+ * />
  */
 export const SelectArrayInput = (inProps: SelectArrayInputProps) => {
     const props = useThemeProps({
@@ -102,6 +110,7 @@ export const SelectArrayInput = (inProps: SelectArrayInputProps) => {
         createLabel,
         createValue,
         disableValue = 'disabled',
+        emptyText, // <-- Add emptyText prop
         format,
         helperText,
         label,
@@ -360,6 +369,11 @@ export const SelectArrayInput = (inProps: SelectArrayInputProps) => {
                     value={finalValue}
                     {...outlinedInputProps}
                 >
+                    {emptyText !== undefined && (
+                        <MenuItem value="" disabled>
+                            {emptyText}
+                        </MenuItem>
+                    )}
                     {finalChoices.map(renderMenuItem)}
                 </Select>
                 {renderHelperText ? (
@@ -384,6 +398,11 @@ export type SelectArrayInputProps = ChoicesProps &
         InputLabelProps?: Omit<InputLabelProps, 'htmlFor' | 'id' | 'ref'>;
         source?: string;
         onChange?: (event: ChangeEvent<HTMLInputElement> | RaRecord) => void;
+        /**
+         * If provided, displays this text as a disabled MenuItem at the top of the dropdown.
+         * Useful for showing a placeholder or empty state.
+         */
+        emptyText?: React.ReactNode;
     };
 
 const sanitizeRestProps = ({