-
-
Notifications
You must be signed in to change notification settings - Fork 169
Description
Overview of the problem
When creating a modal with the useOruga interface it's possible to create duplicate html id's.
For example I have a tooltip in my main page, whose content has the id v-0. I then create a modal with radio buttons which have labels. The radio buttons then start the Id count again meaning that one of the radio buttons might have id v-0 as well. The label that is supposed to be linked to the radio button then no longer triggers an input change when clicked as the first element found with id v-0 is the tooltip.
A workaround is to manually assign the id's. This could be a solution as well but then the documentation should probably warn about this.
Oruga version: [0.12.6]
Vuejs version: [3.5.25]
Expected behavior
Id's should not duplicate throughout the app
Steps to reproduce
- Have a page that contains a component with a generated id using vue's
usedIdlike a tooltip or a radio button. - Create a component containing two radio buttons without an explicit id and with a text label.
- Open a modal containing the radio button component.
- Check in the inspector that the id's of the radio button component are duplicate to the id's in the normal app.
- Check that clicking on one of the radio button labels does not trigger an update.
It might be required to have multiple components that generate an id in the original page. I will try and add a code sample later.