I have a series of closed panels in the React Recipe Box project, one panel for each recipe. The panels are part of a Panel Group Accordion.
Actual behaviour: When clicking on a panel heading the panel opens to reveal the recipe and a Delete button. When the delete button is pressed, the recipe panel is deleted from the app, however the next recipe panel immediately opens. I think this opening next recipe behaviour would be confusing for the user.
Desired behaviour: What I would like to happen is on delete, the panel would delete and the list of remaining closed panels should be visible, i.e. the next panel should not open.
The panel (github link) is in RecipeList.jsx line 61 and is rendered on line 106.
I have tried to refactor using several techniques from React-Bootstrap demos, and whilst I now know a few more things that can be done with Panels I’m none the wiser on how to prevent the next panel from opening when a panel is deleted.
Anyone know what I’m doing wrong?