storefront-ui icon indicating copy to clipboard operation
storefront-ui copied to clipboard

[BUG] - `SfAccordion` is not showing active list on SSR

Open dawid-ziobro opened this issue 2 years ago • 0 comments

Describe the bug SfAccordion by default has all children hidden. With a prop open passed, selected child list is opening, but this is done on mounting, which is done on client side. This leads to increasing CLS due to moving next element down after opening selected child list. This can also have inpact on SEO, as links for child elements are not present in response from the server.

How to reproduce Steps to reproduce the behavior:

  1. Go to https://demo-ct.vuestorefront.io/c/men
  2. Refresh page.
  3. Accordion is closed on init.

Expected behavior On page load, list should be already opened.

Actual behavior On page load, list list closed and is opening after a while.

Screenshots On page load: Zrzut ekranu 2022-06-15 o 13 18 05

After a while list is opening: Zrzut ekranu 2022-06-15 o 17 09 15

Proposed solution SfAccordionItem should accept a new prop like openOnInit that works similarly and in pair with open prop. It could indicate the component if it should be opened on closed on init (SSR).

┆Issue is synchronized with this Jira Zadanie by Unito

dawid-ziobro avatar Jun 15 '22 15:06 dawid-ziobro