Open imelda-guzman opened 1 year ago
In your steps to reproduce, what does this function look like?
Create a function that can be passed to "onAccordionItemToggled" to dynamically set the boolean value for the open prop
The application is built in React. Create two states for each panel. This will be initial state when accordion loads.
const [isPanelOneOpen, setPanelOneOpen] = useState(true);
const [isPanelTwoOpen, setPanelTwoOpen] = useState(false);
Pass the two new variables and functions to accordion item. Note we are using Typescript
<VaAccordionItem
header="Panel One"
id="panelOne"
open={isPanelOneOpen}
onAccordionItemToggled={(event: { target: { open: boolean } }) => setPanelOneOpen(event.target.open)}
>
<VaAccordionItem
header="PanelTwo"
id="panelTwo"
open={isPanelTwoOpen}
onAccordionItemToggled={(event: { target: { open: boolean } }) => setPanelTwoOpen(event.target.open)}
>
We also tried creating a function and then passing it to "onAccordionItemToggled" like this
const togglePanelTwo = (event: boolean | ((prevState: boolean) => boolean)) => {
setPanelTwoOpen(event);
};
and then on accordion item
onAccordionItemToggled={(event: { target: { open: boolean } }) => togglePanelTwo(event.target.open)}
Hello,
I'm following up on old reported GitHub issues. Does anyone have information on this ticket and whether issue reported here with the va-accordion icon has been resolved?
Bug Report
What happened
The accordion panel icon does not hold the state of panel when trying to programmatically pass a boolean variable to the
open
prop for accordion item.The accordion panel when initialized - starts out correct:
Opening second panel - first panel closes and value is set to false, still correct: Before modifying a form element within an accordion item.
Modifying a radio option or dropdown selection or triggering a validation error on a text input is causing icon in first panel to re-render and change
What I expected to happen
I would expect to modify a form element within the accordion item and not have the panel icon change.
Reproducing
Steps to reproduce:
open-single
prop and set the first panel to open when initialized.Urgency
How urgent is this request? Please select the approriate option below and/or provide details