Components breaks when using with different view.

[aster-hu]

Describe the bug When Component.Search() exists in both left and right sidebar in quartz.layout.ts, the search bar on the right side didn't work.

To Reproduce Steps to reproduce the behavior:

1. Clone the quartz repo
2. Add search bar on the right side as below

   right: [
   Component.Search(), // add search bar on the right too
   Component.Graph(),
   Component.DesktopOnly(Component.TableOfContents()),
   Component.Backlinks(),
   ],

3. Build and preview
4. Click the search bar on the right and it would not work

Expected behavior The search bar should work even when it shows on both sidebar.

Usually it's no big deal because only one is needed in most case, but I was trying to achieve different layout for mobile and desktop like below, which triggers the issue.

left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.MobileOnly(Component.Search()),
....

  right: [
    Component.DesktopOnly(Component.Search()),
    Component.Graph(),
...

Desktop (please complete the following information):

• Device: Mac Mini M2
• OS: Ventura 13.5.2
• Browser: Safari, Chrome

[aarnphm]

I think for viewing you should resolve to use custom.scss instead.

You can update how components view based on @media query.

I will close this since this is not really a bug, rather a usage.

[jackyzha0]

@aarnphm this is an actual bug as we kinda do assume that components are singletons and maybe we should revisit that assumption?

[aarnphm]

Hmm, FWIW, assuming singleton should be ok here, since multiple searches don't make sense.

What do you have in mind?

[jackyzha0]

I think specifically on getting search in various places depending on layout is a common usecase, not sure what the best way to solve this is though lol

[aarnphm]

Hmm you are right, I'm doing this for Explorer

// components for pages that display lists of pages  (e.g. tags or folders)
export const defaultListPageLayout: PageLayout = {
  beforeBody: [Component.ArticleTitle()],
  left: [
    Component.MobileOnly(Component.Explorer()),
    Component.MobileOnly(Component.Spacer()),
    Component.Search(),
    Component.Darkmode(),
    Component.DesktopOnly(Component.Explorer({ filterFn: explorerFilterFn })),
  ],
  right: [],
}

[eledah]

Does any workaround exist for this? I'm having the same issue for other components where I want to display them differently based on "Desktop" or "Mobile" user.