search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.03k stars 32.3k forks source link

[Autocomplete][JoyUI] Autocomplete bug with searching title but displaying value #44257

Open corytam opened 3 weeks ago

corytam commented 3 weeks ago

Possible related issue

https://github.com/mui/material-ui/issues/38360

Search keywords

autocomplete

Latest version

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/c8v7xf

Steps:

  1. Create list of options using format countryCode = [ { name: 'Afghanistan', code: 'AF', phoneCode: '+93' }, { name: 'Albania', code: 'AL', phoneCode: '+355' }, { name: 'Algeria', code: 'DZ', phoneCode: '+213' }, .... ....
  2. Create autocomplete and set attribute getOptionLabel={(option) => option.phoneCode}
  3. Type in a country name e.g "France" , the options given show a bunch of countries + the filtered search country (e.g France) at the end of the list

I have noted there might be a related issue where there might be wrong search results when there are lots of data - according to issue https://github.com/mui/material-ui/issues/38360

Current behavior

Autocomplete currently cannot accurately search from list of items when I want to show value selected , but search by label/title/name.

Im using autocomplete for searching for country code , user should be able to search by typing country name , but when selected , the country phone code will be displayed.

If i change the getOptionLabel from getOptionLabel={(option) => option.phoneCode} to getOptionLabel={(option) => option.name}//name is country name / label/title , autocomplete will work ,but I cannot achieve what I want to achieve with autocomplete

Expected behavior

Autocomplete can correctly search from list of items and when selected , the value ( which is different from the label/title/name) will be shown in the option label instead

Context

Your environment

npx @mui/envinfo Tested on Chrome Version 129.0.6668.101 (Official Build) (64-bit) ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. System: OS: Windows 11 10.0.22631 Binaries: Node: 20.11.1 - C:\Program Files\nodejs\node.EXE npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (128.0.2739.79) npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.42 @mui/core-downloads-tracker: 6.0.0-dev.240424162023-9968b4889d @mui/icons-material: ^5.15.20 => 5.15.20 @mui/joy: ^5.0.0-beta.36 => 5.0.0-beta.36 @mui/material: ^5.15.20 => 5.15.20 @mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab @mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab @mui/system: 6.0.0-dev.240424162023-9968b4889d @mui/types: 7.2.14 @mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab @mui/x-date-pickers: ^7.9.0 => 7.9.0 @types/react: ^18.3.3 => 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.4.3 => 5.4.5 ```

Search keywords: autocomplete

siriwatknp commented 1 week ago

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI