No stars are visible if container was hidden on mount

[JavoByte]

Thanks for this components! Looks promising for my use case. However, I have a small issue

I'm integrating this component with Preline Tabs and whenever the stars component is mounted on a default hidden tab, the stars are invisible when the tab gets selected. I guess there must be some size calculations that get broken if the container is hidden. If I move the rating component to a default visible tab, everything works as expected.

Not sure how to work around this issue.

[smastrom]

Hi @JavoByte, you're totally right. getBBox method is not able to get the width/height if display: none is applied.

I will try to release a non-breaking fix in the next minor release. Thank you for reporting the issue.

In the meanwhile, you can overcome the issue by mounting/unmounting the rating component on tab change. You should be able to do that by listening to this event.

{isActiveTab ? <Rating /> : null}

[revengemiroz]

i have the same issue when i try to implement the rating component on a modal the stars disappear. Works on local but in productions it fails

[tarutin]

same

[smastrom]

I'm sorry for this, as it has been caused by some bad architectural decisions I took almost two years ago when I first started developing this package.

I refused to make compromises on various features, especially on how to handle custom SVGs. This resulted in a over-engineered internal Rating Item API (all those patterns intended to render and style the stars).

For this reason, I am not able to fix this bug the "right-way" without introducing breaking changes. In the near future, I'm planning to fully rewrite this package with a lightweight API with a streamlined rendering logic and proper RSC support.

That said, I've released React Rating v1.4.0 that should fix the issue for 99% of the users that are facing it.

Some important considerations:

The fix detects whether a parent element has display: none, if yes, it will observe its attributes until the display value is not set to none anymore. When this condition is met, it will recompute the SVG size which will be calculated properly as the parent is now visible.

There will be only one scenario where this won't work as expected:

❌ Won't work

.SomeOtherParent .RatingParent {
  display: hidden
}

✅ Works

.RatingParent {
  display: hidden
}

Basically, the display property should be toggled directly on the hidden element and not delegated by another parent element.

While this is an edge case, this can be worked around by conditionally mounting/unmounting the rating component as explained in the first reply of this issue.

Thank you,

Simone