React Accordion Section - Content overlaps Titles Below

[TylerBankston]

Sample - React-Accordion-Section

Authors

@ejbenke

Expected or Desired Behavior

1 - When opening a title, I would expect the content area to fill the full width of the webpart title.
2 - When opening a title, I would expect the next titles to slide down, not behind the content area.
3 - When clicking and open title I would expect the open section to close. Toggle.

Observed Behavior

1 - When opening a title, the content (Enhanced Rich Text) the content section is only as wide as the content.
2 - When opening a title, the content overlaps the titles below. This makes it difficult to click the next one.
3 - When clicking an open section, nothing happens. There should be a state where all sections are closed.

Steps to Reproduce

Steps to reproduce the behavior:

1. Go to webpart with a list selected and loaded into the web part
2. Click on any of the titles
3. Scroll down to see how the content section is impacted
4. Click on open title to see Issue 3

Environment Details (Development & Target environment)

• OS: Windows 10
• Target Environment: [ SharePoint Online]
• Browser(s): [ Chrome | Chromium Edge]
• Additional details: The more context you can provide, the easier it is (and therefore quicker) to help.

Additional context

Screenshots showing my display issues

Please let me know if there is any additional information I can provide you. Thank you in advance!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[ejbenke]

Hi @TylerBankston - thanks for your interest in the web part!

For issue 3, that's a great suggestion where clicking on the header/title of an open section would close it (instead of sections only closing when a new section opens). I'll put that near the top of my enhancement list.

For issues 1 and 2 though, I'm having trouble duplicating what you have in your screenshot and are describing.

Does this always happen for you any time you add the web part and add content to the list or did it only happen in one instance? In your screenshot it looks like a list of hyperlinks was added to the Content field of your "Regulatory" section and then is bleeding over. Is that right? And did you manually add that set of hyperlinks within the SharePoint interface for Enhanced Rich Text for that item or did you copy a block of enhanced rich text from elsewhere into the field? It does seem like something unusual is going on so any additional info on how you added content to that particular section of the accordion and what exactly the content is would be helpful.

Thanks again!

[PathToSharePoint]

fyi I did a test with enhanced rich text and a bunch of hyperlinks (entered via the SharePoint form), and it worked just fine for me.

[ejbenke]

Hi @TylerBankston I've submitted a pull request #1472 that will resolve the third issue you list & allow for clicking on the open header of an item to close it (instead of needing to open another item for the open one to close). Once the enhancement is merged in, I'll add an update in the comments here as well. But if you want to make the change yourself in the meantime, just change line 67 of \src\webparts\reactAccordion\components\ReactAccordion.tsx from <Accordion> to <Accordion allowZeroExpanded>, test in your remote workbench and re-package.