Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jakst opened this issue Oct 19, 2022 · 2 comments

Comments

@jakst
Copy link

jakst commented Oct 19, 2022

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
Copy link

Can't reproduce the issue:

Screencast.from.11-21-2022.12_45_26.PM.mp4

@jakst
Copy link
Author

jakst commented Nov 23, 2022

Can't reproduce the issue:

Screencast.from.11-21-2022.12_45_26.PM.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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants