Polymorphic Spotlight.Action component (for "a" tag or other link)

[QuinnStraus]

I have been using a Spotlight in my project, but I was searching for a way to make the action buttons links.
I have been hacking it with a navigation passed in through the onClick on the actions, but this means I don't get nice features of links such as cmd+click opening in a new tab.
I tried to add this through the Spotlight.Action, but since the component is not polymorphic, adding component="a" (or in my case the Next.js Link component) gave a type error when I tried to add the href prop (although it did work if I ignored the error). In addition, adding a link as the child means I have an "a" tag nested inside a button which violates the HTML specifications, and I lose some built-in spotlight action functionality (like highlighting).

Links inside the Spotlight seem like a common use case, so it would be nice to have built-in support at least on the Spotlight.Action component, and perhaps on the parent Spotlight component as well - although I can see it being a challenge to set up the types correctly there.

[ismailenesayhan]

I solved this problem using react-router-dom library. Maybe it helps

// data
const SpotLightData = [
    {
      id: "1",
      slug: "page-slug",
      title: "Page Title",
      description: "Page Description",
    },
    {
      id: "2",
      slug: "page-slug2",
      title: "Page Title2",
      description: "Page Description2",
    },
  ];

// map
  const actions = SpotLightData?.map((item) => ({
    id: item.id,
    label: item.title,
    description: item.description,
    onClick: () => navigate(`/${item.slug}`),
  }));

// component
 <Spotlight actions={actions || []} />

[QuinnStraus]

I am doing a similar thing on my end and it does work to navigate. I just want the added functionality of having the buttons be actual links rather than just buttons that navigate so I can do things like cmd + click to open in a new tab.

[krishna-santosh]

+1

[gabekus]

+1

[willpinha]

I am using window.location.assign to simulate an anchor tag (<a>). Note that this approach does not use client-side navigation, and therefore reloads the entire page. If you want client-side navigation, use a routing library like React Router

const actions: SpotlightActionData[] = [
  {
    id: "a",
    label: "A",
    onClick: () => window.location.assign("/a");
];