Conditional Breadcrumbs

[rtritto]

With Breadcrumbs and Show components, li components are always rendered if they have false condition as signal value.

Example:

<Breadcrumbs>
  <Show when={signal1()}>
    <Component1 />
  </Show>

  <Show when={signal2()}>
    <Component2 />
  </Show>
</Breadcrumbs>

With 2 signals both at false, Breadcrumbs component has 2 childrens and it renders as follow (2 empty components with separator component):

<ol class="MuiBreadcrumbs-ol">
  <li class="MuiBreadcrumbs-li"></li>
  <div class="MuiBreadcrumbs-separator" aria-hidden="true">/</div>
  <li class="MuiBreadcrumbs-li"></li>
</ol>

It should render as no separator component:

<ol class="MuiBreadcrumbs-ol">
  <li class="MuiBreadcrumbs-li"></li>  // empty component as no children for Breadcrumbs component
</ol>

Equal to this rendered code:

<Breadcrumbs />

How can I do?

---

React use case:

<Breadcrumbs>
  {signal1 && <Component1 />}

  {signal2 && <Component2 />}
</Breadcrumbs>

[juanrgm]

Fixed at @suid/material:0.12.3.

[rtritto]

@juanrgm issue still persists

<ol class="MuiBreadcrumbs-ol">
  <li class="MuiBreadcrumbs-li">::marker</li>
  <div class="MuiBreadcrumbs-separator" aria-hidden="true">/</div>
  <li class="MuiBreadcrumbs-li">::marker</li>
</ol>

[rtritto]

@juanrgm

[juanrgm]

I don't find any problem:

https://stackblitz.com/edit/jevfaz?file=src%2FApp.tsx

import { Breadcrumbs } from '@suid/material';
import { Show, createSignal } from 'solid-js';

function Component1() {
  return 'component1';
}

function Component2() {
  return 'component2';
}

export default function App() {
  const [signal1, setSignal1] = createSignal(false);
  const [signal2, setSignal2] = createSignal(false);

  return (
    <>
      <div>
        <button onClick={() => setSignal1(!signal1())}>
          signal1: {signal1() ? 'true' : 'false'}
        </button>
        <button onClick={() => setSignal2(!signal2())}>
          signal2: {signal2() ? 'true' : 'false'}
        </button>
      </div>
      <Breadcrumbs>
        <Show when={signal1()}>
          <Component1 />
        </Show>

        <Show when={signal2()}>
          <Component2 />
        </Show>
      </Breadcrumbs>
    </>
  );
}