See Stackblitz reproduction repo here: https://stackblitz.com/edit/solidjs-template-r95c6s?file=src/App.tsx
If I have an Item in the accordion that's wrapped in a fragment, the <Show when={}> component directly within the fragment does not react to state updates.
Here's the relevant code from the Stackblitz
import { Item } from '@solid-aria/collection';
import { createSignal, Show } from 'solid-js';
import { Accordion } from './Accordion';
/**
* There are two accordion items in here, one wrapped in a
* fragment, and one wrapped in a div. When pressing the
* trigger button, the text to the right of it should
* disappear/appear, because it's wrapped in a
* <Show when={visible()}></Show>. On the one wrapped in a
* div it does, but the one wrapped in a fragment you have to
* collapse & expand the Item header once to trigger the
* state update.
*
* The accordion code is a straight copy/paste from https://github.com/solidjs-community/solid-aria/blob/main/packages/accordion/README.md
*/
export default function App() {
const [visible, setVisible] = createSignal(true);
return (
<Accordion>
<Item key="fragment" title="With fragment wrapper">
<>
<button
style={{ color: visible() ? 'green' : 'red' }}
onClick={() => setVisible((v) => !v)}
>
Trigger
</button>
<Show when={visible()}> - Should appear/disappear</Show>
</>
</Item>
<Item key="div" title="With div wrapper">
<div>
<button
style={{ color: visible() ? 'green' : 'red' }}
onClick={() => setVisible((v) => !v)}
>
Trigger
</button>
<Show when={visible()}> - Should appear/disappear</Show>
</div>
</Item>
</Accordion>
);
}
See Stackblitz reproduction repo here: https://stackblitz.com/edit/solidjs-template-r95c6s?file=src/App.tsx
If I have an Item in the accordion that's wrapped in a fragment, the
<Show when={}>component directly within the fragment does not react to state updates.Here's the relevant code from the Stackblitz