Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
When the navigation items are replaced by a subset of the previous items, the breadcrumb trail is not updated. The deleted items have disappeared but not the separators.
Click on 'Home'. The parent and child pages disappear but the separators remain visible.
Click on "Reset" and activate the workaround. Click on "Home" again. Now the separators also disappear.
Explanation
The breadcrumb wants to display its child items in a list structure (ol/li). It does this by using the generic slot element to react to changes. Then, it adds a slot attribute to each element to insert it into the list via named slot elements.
In doing so, the items come out of the generic slot to be projected into the named slots of the list. The slotchange event is triggered on the generic slot and the breadcrumb is re-rendered.
When changing items, the elements corresponding to the items already present are not rendered again and retain their slot attribute and therefore their projection in the list. The elements corresponding to the deleted items are removed from the DOM. This does not trigger a slotchange event, neither in the generic slot from which the elements have already been removed following the addition of their slot attribute, nor in the corresponding named slots because only the addition and deletion of the slot attribute are event trigger in this case.
Thus the named slots of the deleted items are indeed empty but remain present in the HTML structure of the list, with the separators which remain visible.
Expected behavior
We need the breadcrumb to be updated after modifying its child items.
Versions
Clarity project:
[x] Clarity Core
[ ] Clarity Angular/UI
Clarity version:
[ ] v5.x
[x] v6.x
Framework:
[x] Angular
[ ] React
[ ] Vue
[ ] Other:
Framework version:
Angular v15.
Clarity Core v6.4.3.
Workaround
Part of the problem is that Angular won't update an item if the corresponding data hasn't changed. It's a good idea but we can force it by copying the data (for example a clone of the object). Thus a new element is created by Angular, without the slot attribute. The breadcrumb generic slot's slotchange event is fired, resulting in the component being updated (see the StackBlitz example).
Additional notes
A solution might be to use the MutationObserver interface to properly react to changes in the child list.
Describe the bug
When the navigation items are replaced by a subset of the previous items, the breadcrumb trail is not updated. The deleted items have disappeared but not the separators.
How to reproduce
Steps to reproduce the behavior:
Explanation
The breadcrumb wants to display its child items in a list structure (ol/li). It does this by using the generic slot element to react to changes. Then, it adds a slot attribute to each element to insert it into the list via named slot elements. In doing so, the items come out of the generic slot to be projected into the named slots of the list. The slotchange event is triggered on the generic slot and the breadcrumb is re-rendered.
When changing items, the elements corresponding to the items already present are not rendered again and retain their slot attribute and therefore their projection in the list. The elements corresponding to the deleted items are removed from the DOM. This does not trigger a slotchange event, neither in the generic slot from which the elements have already been removed following the addition of their slot attribute, nor in the corresponding named slots because only the addition and deletion of the slot attribute are event trigger in this case.
Thus the named slots of the deleted items are indeed empty but remain present in the HTML structure of the list, with the separators which remain visible.
Expected behavior
We need the breadcrumb to be updated after modifying its child items.
Versions
Clarity project:
Clarity version:
Framework:
Framework version:
Angular v15. Clarity Core v6.4.3.
Workaround
Part of the problem is that Angular won't update an item if the corresponding data hasn't changed. It's a good idea but we can force it by copying the data (for example a clone of the object). Thus a new element is created by Angular, without the slot attribute. The breadcrumb generic slot's slotchange event is fired, resulting in the component being updated (see the StackBlitz example).
Additional notes
A solution might be to use the MutationObserver interface to properly react to changes in the child list.