adobe / adobe/spectrum-web-components

[Bug]: Combobox unsynced animations

Open
#4,509 1 comment 0 reactions 0 assignees View on GitHub
bug Component:Combobox SEV missing Spectrum CSS
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [X] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-combobox

### Expected behavior

Combobox should open smoothly and should not perform additional transitions/animations as a result of child rendering.
Eventually all calculations should be done before the animations start?

### Actual behavior

See attached recording

### Screenshots

https://github.com/adobe/spectrum-web-components/assets/13311865/de94abd3-b63b-4169-b450-0997f73d20f2

### What browsers are you seeing the problem in?

Chrome

### How can we reproduce this issue?

I personally reproduced this issue in the storybook, but I tweaked the elements a bit so that I can position the Combobox on the bottom-right of the page.
Also, this reproduces better when you have more options than what fits on the screen.

### Sample code that illustrates the problem

_No response_

### Logs taken while reproducing problem

Not reproducing when "Reduce motion" is toggled ON, so most probably something to do with CSS transitions.

Contributor guide

Open the contributing guide

Research direction

Start with the sp-combobox Storybook reproduction in Chrome, especially with more options than fit onscreen, and inspect CSS transitions during child rendering. Done means opening remains smooth without additional transitions triggered by children, while preserving the reduced-motion behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.