topic Re: Non-unique IDs created for collapsible calcite-block chevron button in Calcite Design System Questions

Non-unique IDs created for collapsible calcite-block chevron button

FC_Basson — Fri, 24 Nov 2023 10:00:23 GMT

These warnings are popping up during page load in Chrome, which indicates that there are multiple elements being created with the same ID.

These elements are all linked to the chevron (collapse toggle) button of a "calcite-block" and are all given the same "id" attribute value of "toggle". Is there any way to prevent this?

Re: Non-unique IDs created for collapsible calcite-block chevron button

MattDriscoll — Mon, 27 Nov 2023 19:10:10 GMT

Hi @FC_Basson do you have a code sample you could share where you're seeing this? I wasn't able to see it in chrome.

These id's are within the shadowRoot of a component so they should not be conflicting with each other since they are in a different DOM root.

Re: Non-unique IDs created for collapsible calcite-block chevron button

FC_Basson — Thu, 30 Nov 2023 09:01:20 GMT

Hi @MattDriscoll. I'm not able to recreate the results outside of my existing code base. Noted that the elements with the same IDs are indeed in a different DOM root.

The first line of the warnings is this: [DOM] Found 24 elements with non-unique id #toggle: (More info: https://www.chromium.org/developers/design-documents/create-amazing-password-forms)

Which led me to observing the following: I have a calcite-input element of type "password" inside a calcite-modal (hidden at startup). If I change the calcite-input type to "text", the ID errors do not show up. If I set the type back to "password" after the page has loaded, the ID warnings immediately appear in the console. It also seems that the issue is related with the autocomplete property of the input.

Re: Non-unique IDs created for collapsible calcite-block chevron button

FC_Basson — Fri, 01 Dec 2023 09:23:59 GMT

The duplicate IDs warnings are generated when strict HTML guidelines are applied by the browser, which is fine with me. The calcite-block chevron toggle buttons should not have the same ID of "toggle", but instead just the "toggle" class, which would be similar to the calcite-accordion-item chevron dropdown button. So maybe the Calcite team can have a look at this for future releases @KittyHurley ?

Re: Non-unique IDs created for collapsible calcite-block chevron button

MattDriscoll — Fri, 01 Dec 2023 19:14:21 GMT

Hi @FC_Basson , we did find a potential chrome bug that may be related to the password issue.

https://bugs.chromium.org/p/chromium/issues/detail?id=1496312&q=duplicate%20id%20shadow&can=2

The id's for toggle shouldn't be an issue since they are encapsulated within a shadowRoot. So it might just be a false positive warning that is occurring here.