solidjs-community / solid-aria

A library of high-quality primitives that help you build accessible user interfaces with SolidJS.
Other
289 stars 16 forks source link

Accordion Items wrapped in a fragment cannot have children with `<Show when={}>` behaviour #78

Open jakst opened 1 year ago

jakst commented 1 year ago

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>
  );
}
amirhhashemi commented 1 year ago

Can't reproduce the issue:

https://user-images.githubusercontent.com/87268103/203012232-67336c28-0f32-4e5c-9f09-3687fed34c32.mp4

jakst commented 1 year ago

Can't reproduce the issue:

https://user-images.githubusercontent.com/87268103/203012232-67336c28-0f32-4e5c-9f09-3687fed34c32.mp4

Sorry if it was a bit unclear, but the bug is triggered when you press the "Trigger" buttons, not the Item headers like you do in your video.