Does Mantine Spotlight Compound components support hightlight(highlightQuery) ?

[xumeng]

Spotlight has a attribute: highlightQuery, but I did not found in Spotlight Compound components.
How can I implement higlight text in Spotlight.

My code is like:

<Spotlight.Root query={query} onQueryChange={setQuery} scrollable>
                <Spotlight.Search
                    placeholder="Search"
                    leftSection={<IconSearch stroke={1.5} />}
                />
                <Spotlight.ActionsList>
                    {queryItems.length > 0 ? (
                        queryItems
                    ) : (
                        <Spotlight.Empty>
                            Not found...
                        </Spotlight.Empty>
                    )}
                </Spotlight.ActionsList>
</Spotlight.Root>

[rtivital]

You need to set highlightQuery on Spotlight.Action components.

[xumeng]

Thanks! I tried to custom componment in Spotlight.Action, but the query text highlight doesn't worked.

<Spotlight.Action
    highlightQuery
    key={item.id + ''}
    onClick={() => handleSearchItemClick(item)}
    label={item.title}
    description={RemoveHtmlTags(item.content)}
>
    <Group wrap="nowrap" w="100%">
        <div style={{ flex: 1 }}>
            <Group>
                <Badge
                    size="md"
                    variant="gradient"
                    gradient={{
                        from: MAIN_C,
                        to: 'cyan',
                        deg: 90,
                    }}
                >
                    {item.category.title}
                </Badge>
                <Text>{item.title.substring(0, 30)}</Text>
            </Group>

            <Text opacity={0.6} size="xs">
                {RemoveHtmlTags(item.content)}
            </Text>
        </div>
    </Group>
</Spotlight.Action>

[rtivital]

If you use custom children, you need to implement highlighting logic on your side.