search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
447 stars 83 forks source link

<vaadin-chart> is not updated when an attribute is removed #7768

Open Legioth opened 1 week ago

Legioth commented 1 week ago

Description

The chart does not go back to the default value when an attribute such as type is removed. This is maybe not something that is common in application code but it immediately becomes apparent when the update is triggered through HMR after editing application code to no longer use the attribute.

Expected outcome

Expected that removing an attribute makes the chart render in the same way as before the attribute was added

Minimal reproducible example

https://vaadin.com/docs/latest/components/charts/charttypes#line-example

Steps to reproduce

  1. Open https://vaadin.com/docs/latest/components/charts/charttypes#line-example
  2. Open the browser inspector and find the <vaadin-chart> element corresponding to the "Line example" chart
  3. In the browser inspector, add a type="column" attribute to the element. Notice that chart becomes a column chart instead of a line chart.
  4. Remove the type attribute to revert the element to its original configuration. Notice that this still renders a column chart rather than a line chart.

Environment

Vaadin version(s): Tested with Vaadin 24.5.0.alpha13 and whatever version is currently used by the documentation.

Browsers

Issue is not browser related

web-padawan commented 1 week ago

Caused by the following logic in the observer:

https://github.com/vaadin/web-components/blob/6f3ad57baff3a5d4c51126151bfaf98301c68539/packages/charts/src/vaadin-chart.js#L1553-L1563

Legioth commented 1 week ago

I think I noticed a similar effect with some other attributes also such as title on <vaadin-chart-series>.

And then there's no-legend which seems to work as expected when updating the attribute but HRM has no effect at least with React when adding or removing that prop.