Skip to content

Add emptyText prop to SelectArrayInput with tests and documentatio#11171

Open
syedaliazzam wants to merge 1 commit intomarmelab:masterfrom
syedaliazzam:feature/selectarrayinput-emptytext
Open

Add emptyText prop to SelectArrayInput with tests and documentatio#11171
syedaliazzam wants to merge 1 commit intomarmelab:masterfrom
syedaliazzam:feature/selectarrayinput-emptytext

Conversation

@syedaliazzam
Copy link

Problem

The SelectArrayInput component did not support displaying a placeholder or empty state when no selection was made, unlike SelectInput, which has an emptyText prop. This made it difficult to provide user guidance or indicate that no options are available in multi-select dropdowns.

Solution

This PR introduces an emptyText prop to SelectArrayInput. When provided, a disabled MenuItem with the emptyText value is rendered at the top of the dropdown. This matches the behavior of SelectInput and improves the user experience for forms using SelectArrayInput.

  • Added the emptyText prop to SelectArrayInput and its type definition.
  • Render a disabled MenuItem with the emptyText value when provided.
  • Added a unit test to ensure the emptyText prop works as expected.
  • Updated the JSDoc documentation for SelectArrayInput.

How To Test

  1. Use the SelectArrayInput component and pass the emptyText prop:
    <SelectArrayInput
      source="tags"
      choices={choices}
      emptyText="No tags available"
    />

Copy link
Contributor

@slax57 slax57 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your contribution.

As this is a new feature, this PR needs to target the next branch instead of master.

Also, please update the documentation, and the storybook.

Also, I partially disagree with the implementation. To me, the empty text should be rendered when there are no options available, but not all the time. Otherwise it seems a bit odd to have both a message saying 'No selection available' and options below it.

Image

And one last thing: the prop should support translation keys.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants