-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Accordion doesn't support JSX content #1989
Comments
it appears to be that the act of opening a leaf node causes the issue in addition, instead of a simple way to verify what I鈥檓 saying is to comment out the |
@Aaronius just copying our conversation here as well react-spectrum/packages/@react-stately/tree/src/TreeCollection.ts Lines 29 to 33 in 4b75cbe
react-spectrum/packages/@react-stately/collections/src/CollectionBuilder.ts Lines 181 to 200 in 4b75cbe
which calls builder.getFullNode for the p child, which is where it errors out because type is p and there鈥檚 no getCollectionNode on the p component. The reason we don鈥檛 get the issue with Menu is because there鈥檚 never an item node in expandedKeys, so node.childNodes is never accessed on the item (see the first snippet I shared). |
I think the intersection here is that the TreeCollection lines you noted are for things like Section, which would have a structure like this -> |
any workaround for this issue to show jsx content inside accordion body. |
It apparently has to do with JSX with non-empty
|
This is possible workaround but affects the component accessibility. I would really appreciate if this issue could be solved. |
Just discovered this issue. I submitted a duplicate (#3882) just a few hours ago. The accordian/disclosure component is a very widely used component and its a damn shame that ive had my team going gang busters with react-aria until we got a flying head kick to the face with a +12 month old issue. Completely understand devs are under the pump, but this is such a prevalent component pattern its a shame that its been tucked away in the backlog basement for so long... |
Related #3817 |
Answered in #3882, the quick workaround is to specify <Accordion
{...props}
expandedKeys={openKeys}
onExpandedChange={setOpenKeys}
>
<Item key="files" title="Your files" hasChildItems={false}>
<p>files</p>
</Item>
<Item key="shared" title="Shared with you" hasChildItems={false}>
<p>shared</p>
</Item>
<Item key="last" title="Last item" hasChildItems={false}>
<p>last</p>
</Item>
</Accordion> |
It worked perfectly! Thank you @jbltx. Thank you react-spectrum for open-source all these great solutions. Cheers |
Just to reiterate on what @snowystinger mentioned previously: Accordion isn't on our near term milestones so we are open to contributions for this/Accordion in general. |
馃悰 Bug Report
The Accordion component doesn't seem to support JSX content.
馃 Expected Behavior
I would expect that when I render this:
that I would get an accordion that works properly by allowing me to expand and collapse the item.
馃槸 Current Behavior
I get the error
Unknown element <p> in collection.
. If I remove thep
tag and leave theparagraph content
text, the accordion works fine.馃拋 Possible Solution
馃敠 Context
I'm trying to display content that's more complex than a simple string of text.
馃捇 Code Sample
https://codesandbox.io/s/accordion-content-j4q5i?file=/src/App.js
馃實 Your Environment
馃Б Your Company/Team
Adobe Experience Platform Data Collection
馃暦 Tracking Issue (optional)
The text was updated successfully, but these errors were encountered: