When there are more than one Search or Darkmode components, only the first ones function properly

[keonly]

Describe the bug
When using Component.DesktopOnly on Component.Search or Component.Darkmode to the right, the components appear on the site but they do not function. (There may be other components that does not function as well, but I have not yet checked)

Adding these to the left functions normally.

When Component.Search or Component.Darkmode are used more than once, only the first ones functions normally. From the second one they do not function, despite being shown on the site.

To Reproduce
Steps to reproduce the behavior:

1. Add the components in quartz.layout.ts.

  left: [
    Component.Search(),
    Component.Search(),
    Component.Darkmode(),
    Component.Darkmode(),
  ]

2. Two search boxes and two darkmode toggles are shown on the site. However, only the first ones function normally.

Expected behavior
When clicking search or darkmode components, they should show a search bar and change theme respectively.

Screenshots and Source
If applicable, add screenshots to help explain your problem.

You can help speed up fixing the problem by either

1. providing a simple reproduction
2. linking to your Quartz repository where the problem can be observed

Desktop (please complete the following information):

• Quartz Version: Latest commit (b3a0290)
• node Version: v22.9.0
• npm version: v10.9.0
• OS: Linux
• Browser: Firefox

Additional context
Add any other context about the problem here.

[saberzero1]

Hey, when you were testing this, were the component included multiple times (on both left sidebar and right sidebar) or just once?

[keonly]

Hey, when you were testing this, were the component included multiple times (on both left sidebar and right sidebar) or just once?

Ah yes, they were used in left with MobileOnly. It seems like multiple usages of Search / Darkmode components are causing errors.

[keonly]

I updated the issue title the bug description. Thank you for pointing out.

[saberzero1]

I updated the issue title the bug description. Thank you for pointing out.

Thanks. I suspected as much.

We'll need to update the selectors from single select to a multi select. Currently it expects a singular id and it finds multiple, thus resulting in the broken behavior.

[aarnphm]

This is currently a limitation, given that each components are considered a singleton.

[saberzero1]

This is currently a limitation, given that each components are considered a singleton.

I remember this being mentioned before. Is this something we want to add to the documentation? Currently searching singleton yields no results.

[aarnphm]

No need to document this.