[material-ui][Autocomplete] Label not refreshing on state change

[QuentinouLeTwist]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Running on "@mui/material": "^5.14.18" I've some troubles with the autocomplete.

When the attributes changes, the selected label in the input field does not get re-rendered with the latest value.

However the corresponding label in the completion list is well refreshed.

I suspect the internal state representing the selected label within Autocomplete component does not get updated on re-rendering.

Following the code I'm using.

<Autocomplete
          fullWidth
          disablePortal
          options={attributes.map((attribute) => ({ label: attribute.name.fr, attribute }))}
          renderInput={(params) => <TextField {...params} label="Sélectionner un attribut" />}
          renderOption={(props, option) => (
            <HStack {...props as any} alignItems="center" gap={1}>
              { option.attribute.type === AttributeType.Select && <FormatListBulletedIcon /> }
              { option.attribute.type === AttributeType.Boolean && <ToggleOnIcon /> }
              { option.attribute.type === AttributeType.Text && <AbcIcon /> }
              { option.label }
            </HStack>
          )}
          onChange={(_event, value) => {
            setSelectedAttribute(value ? value.attribute as Attribute : null);
            setSaveableAttribute(createSaveAttributeDto(value ? value.attribute as Attribute : undefined));
          }}
        />

Following video of the bug : https://github.com/mui/material-ui/assets/8969231/b51318b9-4b17-427d-8a67-a235d4a47c04

Current behavior 😯

Selected label in the input field is not updated on re-render.

Expected behavior 🤔

When the autocomplete gets re-rendered, the selected label in the input field should be updated with the latest value..

Context 🔦

No response

Your environment 🌎

{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "generate": "graphql-codegen",
    "generate:watch": "graphql-codegen --watch"
  },
  "dependencies": {
    "@apollo/client": "^3.8.7",
    "@emotion/css": "^11.11.2",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.18",
    "@mui/lab": "^5.0.0-alpha.153",
    "@mui/material": "^5.14.18",
    "apollo-upload-client": "^18.0.1",
    "dayjs": "^1.11.10",
    "graphql": "^16.8.1",
    "i18next": "^23.7.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^13.5.0",
    "react-router-dom": "^6.20.0",
    "usehooks-ts": "^2.9.1"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^5.0.0",
    "@graphql-codegen/named-operations-object": "^3.0.0",
    "@graphql-codegen/typescript": "^4.0.1",
    "@graphql-codegen/typescript-operations": "^4.0.1",
    "@graphql-codegen/typescript-react-apollo": "^4.1.0",
    "@graphql-codegen/typescript-react-query": "^6.0.0",
    "@types/apollo-upload-client": "^17.0.5",
    "@types/react": "^18.2.38",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.12.0",
    "@typescript-eslint/parser": "^6.12.0",
    "@vitejs/plugin-react": "^4.0.1",
    "eslint": "8.54.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-cypress": "^2.15.1",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "sass": "^1.69.5",
    "typescript": "^5.3.2",
    "vite": "^5.0.2"
  }
}

[DiegoAndai]

Hey @QuentinouLeTwist , thanks for the report!

I suspect the internal state representing the selected label within Autocomplete component does not get updated on re-rendering.

I suspect the same. Have you tried controlling the state as a workaround?

If you provide a minimal reproduction example, it would help a lot to debug the issue. A live example would be perfect. This codesandbox.io template may be a good starting point.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.