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

Question

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?

MattDriscoll · Answer

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.

FC_Basson · Answer

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 ?

FC_Basson · Answer

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.