adobe / spectrum-web-components

Spectrum Web Components
https://opensource.adobe.com/spectrum-web-components/
Apache License 2.0
1.25k stars 200 forks source link

[Bug]: ColorSlider position not updating on change of hue value #3071

Open prabhjodh opened 1 year ago

prabhjodh commented 1 year ago

Code of conduct

Impacted component(s)

sp-color-slider

Expected behavior

The slider position should change according to the updated hue value.

Actual behavior

The slider/color handle position is not changing/updating according to the updated hue value when only 'value' property is passed and 'color' property is not passed.

Screenshots

https://user-images.githubusercontent.com/20225072/228529805-4d8c7208-8b63-475b-a616-9cf09a75ed6d.mov

What browsers are you seeing the problem in?

Firefox, Chrome, Safari, Microsoft Edge

How can we reproduce this issue?

  1. Add the sp-color-slider
  2. Pass 'value' property with the hue value, stored in some state
  3. Do not pass the 'color' property
  4. Change the hue property value without using the slider (can change hue state value by using an input field)
  5. After changing the value, the color of the color handle is updated but the slider position remains the same as last color.

Sample code that illustrates the problem

@state() private _hue = 0;

protected render(){ return html` <sp-color-slider value=${this._hue} @input=${this._onChangeSlider}

<input value=${this._hue} @onChange=${this.updateHueState} `; }

Logs taken while reproducing problem

No response

Westbrook commented 1 year ago

Will hopefully be addressed via https://github.com/adobe/spectrum-web-components/pull/2782, but we've got some work left before we can aim that to land.