Skip to content

Duplicate element Id's can be generated when using a programmatic modal, causing broken :for attributes. #1532

@DavidVanDeursen

Description

@DavidVanDeursen

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

  1. Have a page that contains a component with a generated id using vue's usedId like a tooltip or a radio button.
  2. Create a component containing two radio buttons without an explicit id and with a text label.
  3. Open a modal containing the radio button component.
  4. Check in the inspector that the id's of the radio button component are duplicate to the id's in the normal app.
  5. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions