Built-in search tags layout #1138

Vanja-S · 2024-12-04T14:21:27Z

Vanja-S
Dec 4, 2024

Hi!

I have set up tag filtering search using the built-in search provider.

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={mulish.className} suppressHydrationWarning>
      <body className="flex flex-col min-h-screen">
        <RootProvider
          search={{
            options: {
              defaultTag: '',
              tags: source.pageTree.children.map((item) => {
                const folderItem = item as Folder;
                return {
                  name: folderItem.name?.toString() || '',
                  value: folderItem.name?.toString().toLowerCase().replaceAll(' ', '-') || ''
                };
              }),
            }
          }}>
          {children}
        </RootProvider>
      </body>
    </html>
  );
}

But I have one problem, the tags overflow and don't wrap:

Can you specify this CSS manually without creating a new component in the RootProvider?
I can also try to open a MR request to include this in the built-in search if needed :)

fuma-nama · 2024-12-04T14:53:26Z

fuma-nama
Dec 4, 2024
Maintainer

Oh needing to wrap the items is definitely a bad UX, it shouldn't have more than 5 items, that is too crowded for a search dialog. You could replace it with a custom footer and use a select/dropdown component for filters instead.

See https://fumadocs.vercel.app/docs/ui/search#replace-search-dialog

1 reply

Vanja-S Dec 6, 2024
Author

Hey, got it, thanks for the advice, I will probably implement a different solution then :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Built-in search tags layout #1138

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Built-in search tags layout #1138

Vanja-S Dec 4, 2024

Replies: 1 comment · 1 reply

fuma-nama Dec 4, 2024 Maintainer

Vanja-S Dec 6, 2024 Author

Vanja-S
Dec 4, 2024

Replies: 1 comment 1 reply

fuma-nama
Dec 4, 2024
Maintainer

Vanja-S Dec 6, 2024
Author