[autocomplete][JoyUI] Autocomplete bug with searching title but displaying value

Possible related issue

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

Search keywords

autocomplete

Latest version

• I have tested the 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

  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