How can I prevent the accordion group from rerendering

Question

I’ve got an AccordionGroup with a value to open the first accordion.

<IonAccordionGroup
     multiple={true}
     value="first"
     ...

In my second accordion their is an ion-input.

<IonAccordion
        value="second"
...
    <IonInput
        label=...
        value={Inputvalue}
        type="text"
        onIonInput={(e) => setInputvalue(e.detail.value as string)}

OnIonInput the AccordionGroup is closing the second accordion and opens the first (setting its value to default).

I want that no Accorion is closed or opend changing the input.

How can I prevent the accordion group from rerendering? Or is my problem an other one?

Answer 1

I simply took two IonAccordionGroups instead of one to solve the problem. Not nice but effective :-)

The value of the first IonAccodionGroup I handled as descripted in the official documentation, something like

const values = ["first", "second", "third"];
const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
  const collapsedItems = values.filter((value) => value !== 
  ev.detail.value);
  const openedAccordions = ev.detail.value;
  setValueOfFirstAccorionGroup(openedAccordions);
};