[Autocomplete][material-ui] noOptionsText does not show in freeSolo

[diegomarcuz]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

No response

Current behavior 😯

Steps:

1. Go to the mui documentation for freeSolo demo
2. Enter an option that is not provided by the list.
3. The information set for noOptionsText will be shown when the pop-up opens.

Expected behavior 🤔

I expect the noOptionsText should be shown when no options are found (not when the input is first clicked) because when searching and if nothing was found, It would be good to provide the users with some feedback. I can do the adjustment, but I would like to open to discussion before coding it.

Context 🔦

I have a Google Search, but when the users do find nothing, I would like to provide feedback for them and I am using freeSolo for this use case because I read the documentation. However, I am in doubt if I remove the freeSolo will be semantically right.

Your environment 🌎

npx @mui/envinfo

Browser
  Brave - Version 1.52.129 Chromium: 114.0.5735.198 (Official Build) (arm64)
System:
    OS: macOS 13.4.1
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: Not Found
    Safari: 16.5.1
  npmPackages:
    @mui/base:  5.0.0-beta.4 
    @mui/core-downloads-tracker:  5.13.4 
    @mui/material: ^5.13.5 => 5.13.5 
    @mui/private-theming:  5.13.1 
    @mui/styled-engine: @mui/styled-engine-sc@latest => 5.13.2 
    @mui/system:  5.13.5 
    @mui/types:  7.2.4 
    @mui/utils:  5.13.1 
    @types/react: ^18.2.0 => 18.2.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components: ^5.3.10 => 5.3.10 
    typescript: ^5.0.4 => 5.0.4 

[diegomarcuz]

@mj12albert, Hey, how are you? do you have any news here?

[itsyanQA]

Also encountering this problem in my project, anything new?

[mj12albert]

I believe this is the expected behavior for freeSolo - because it's supposed to allow any arbitrary text input, it wouldn't make sense to show "no options"

I have a Google Search, but when the users do find nothing, I would like to provide feedback for them

@diegomarcuz The primary use case for freeSolo is a exactly a "search input" - even when Google search can't autocomplete a query you're typing in the textbox, that query is still "valid", if there are no search results (after submitting/executing the search) the feedback wouldn't be displayed in the input itself — is this similar to the use-case/UX you are trying to build?

[tombburnell]

I would also like this because many users do not know to press enter to add and only search through the list so I would like to show them a message that says, "No matching option found, press enter to add"

[mleister97]

Any updates on this one?

[mj12albert]

I would also like this because many users do not know to press enter to add and only search through the list so I would like to show them a message that says, "No matching option found, press enter to add"

@tombburnell You can refer to the "Free solo with text demo" here to see how to achieve this:

I will close this issue for now!

[segullshairbutt]

I also faced this problem when developing an autocomplete with the paginated response from the backend. I created a custom PaperComponent and rendered it manually if the options are empty by using this prop.
{...(props.options.length === 0 ? { PaperComponent: EmptyTextPaperComponent } : {})}

And to mimic the exact no option text, I used the following component.

const NoOptionTextLabel = styled('div')(({ theme }: { theme: Theme }) => ({
  color: theme.palette.grey[600],
  padding: theme.spacing(2),
}));

const EmptyTextPaperComponent: FC<PaperProps> = (props) => {
  const { t } = useTranslation();

  return (
    <Paper {...props}>
      <NoOptionTextLabel className={autocompleteClasses.noOptions}>
        {t('Components.Autocomplete.noOptionsText')}
      </NoOptionTextLabel>
    </Paper>
  );
};