VaAccordionItem re-renders the icon when panel is collapsed

[imelda-guzman]

Bug Report

• [X] I’ve searched for any related issues and avoided creating a duplicate issue.

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

• Component Library version: 11.5.0
• Web Components version: 4.12.0
• Formation version: 7.0.2
• Device: HP Elitebook
• Browser: Microsoft Edge

Steps to reproduce:

1. Create a VaAccordion with 2 or 3 panels and give it the open-single prop and set the first panel to open when initialized.
2. Create a function that can be passed to "onAccordionItemToggled" to dynamically set the boolean value for the open prop
3. Modify a form element in either second or third panel and change its value. The VaRadio or VaSelect will work.
4. Notice the icon will change on the first panel when its collapsed.

Urgency

How urgent is this request? Please select the approriate option below and/or provide details

• [ ] This bug is blocking work currently in progress
• [ ] This bug is affecting work currently in progress but we have a workaround
• [ ] This bug is blocking work planned within the next few sprints
• [X] This bug is not blocking any work
• [ ] Other

[bkjohnson]

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

[imelda-guzman]

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)}

[imelda-guzman]

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?