Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Autocomplete] Initial render with a value set always causes input label to perform the shrink animation #44506

Open
ShotSkydiver opened this issue Nov 21, 2024 · 0 comments
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer

Comments

@ShotSkydiver
Copy link

ShotSkydiver commented Nov 21, 2024

Steps to reproduce

Steps:

  1. Open this link to live example: https://codesandbox.io/p/sandbox/stoic-fire-zz67mz-zz67mz?from-embed=&workspaceId=edc4f89e-5831-4c48-b5ed-57fcd105b256
  2. Click show/hide autocomplete button
  3. Watch the input label do its shrink animation despite there being a value set initially

Current behavior

When providing a value to Autocomplete, on initial render it'll animate the input label shrinking as if a value was entered after the component was rendered, which gets extra visually annoying when having large groups of autocomplete fields that are contained within Steps or show/hide buttons

Expected behavior

The input label is already shrunk at initial render without any animation, like it is for TextField, Select, etc

Context

N/A

Your environment

npx @mui/envinfo
    System:
    OS: macOS 15.2
  Binaries:
    Node: 23.2.0 - /opt/homebrew/bin/node
    npm: 10.9.0 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Safari: 18.2
  npmPackages:
    @emotion/react: 11.13.3 => 11.13.3 
    @emotion/styled: 11.13.0 => 11.13.0 
    @mui/base: 5.0.0-beta.61 => 5.0.0-beta.61 
    @mui/codemod: 6.1.7 => 6.1.7 
    @mui/core-downloads-tracker:  6.1.4 
    @mui/icons-material: 6.1.7 => 6.1.7 
    @mui/lab: 6.0.0-beta.15 => 6.0.0-beta.15 
    @mui/material: 6.1.7 => 6.1.7 
    @mui/private-theming:  6.1.7 
    @mui/styled-engine:  6.1.4 
    @mui/styles: 6.1.7 => 6.1.7 
    @mui/system: 6.1.7 => 6.1.7 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.4 
    @mui/x-charts: 7.22.2 => 7.22.2 
    @mui/x-charts-vendor:  7.20.0 
    @mui/x-data-grid: 7.22.2 => 7.22.2 
    @mui/x-date-pickers: 7.22.2 => 7.22.2 
    @mui/x-internals:  7.21.0 
    @types/react:  18.3.11 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 

Search keywords: autocomplete shrink animation initial value

@ShotSkydiver ShotSkydiver added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer
Projects
None yet
Development

No branches or pull requests

1 participant