Search Query on BreadCrumbs

[JSShant]

As the title says trying to get search Query in my breadcrumbs, currently have it working as such:

import { Breadcrumb } from 'react-instantsearch-hooks-web';
import {BreadcrumbConnectorParamsItem} from "instantsearch.js/es/connectors/breadcrumb/connectBreadcrumb";
import {TransformItemsMetadata} from "instantsearch.js";
const transformItems = (items: BreadcrumbConnectorParamsItem[], metadata: TransformItemsMetadata) => {
return !!metadata?.results?.query ? [...items, {...items[0], label:'Search results: ''+ metadata.results.query+'''}] : items;
};

However the "home" doesnt reset the page if there are any solutions

[Haroenv]

good point, it would make sense for breadcrumb to reset the page on refine, which I believe it currently doesn't (regardless of transformItems)

[Haroenv]

With a custom Breadcrumb, you can create the situation you want, where both the query and page get reset whenever something is reset:

import {
  useBreadcrumb,
  UseBreadcrumbProps,
  useSearchBox,
} from 'react-instantsearch-hooks-web';
import {
  Breadcrumb as BreadcrumbUiComponent,
  BreadcrumbProps as BreadcrumbUiProps,
} from 'react-instantsearch-hooks-web/dist/es/ui/Breadcrumb';

type BreadcrumbUiProps = Pick<
  BreadcrumbUiProps,
  'items' | 'hasItems' | 'createURL' | 'onNavigate' | 'translations'
>;

type BreadcrumbProps = Omit<BreadcrumbUiProps, keyof UiProps> &
  Omit<UseBreadcrumbProps, 'separator'> & {
    translations?: Partial<UiProps['translations']>;
  };

function Breadcrumb(props: BreadcrumbProps) {
  const { canRefine, createURL, items, refine } = useBreadcrumb(props, {
    $$widgetType: 'custom.breadcrumb',
  });
  const { query, refine: refineQuery } = useSearchBox(
    {},
    { $$widgetType: 'custom.breadcrumb' }
  );

  const uiProps: UiProps = {
    items: query
      ? [
          ...items.map(({ label }, i) => {
            return {
              label,
              // we refine using the "next" value, as otherwise a step is missed
              // if we are at the last value of the breadcrumb, you want to not refine
              // this is because the value isn't set, it's toggled
              value: items[i + 1]?.value ?? "__don't_refine__",
            };
          }),
          { label: `query: ${query}`, value: null },
        ]
      : items,
    hasItems: canRefine,
    createURL,
    onNavigate: (val: string | null) => {
      refineQuery('');
      if (val !== "__don't_refine__") {
        refine(val);
      }
    },
    translations: { rootElementText: 'Home' },
  };

  return <BreadcrumbUiComponent {...props} {...uiProps} />;
}

https://codesandbox.io/s/nervous-ully-fhpnwf?file=/src/App.tsx

The default behaviour is how it behaves, as the page only gets reset if the refinement is different than the one before