bug: React, can't set value to array in JSX

[XueMeijing]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

IonAccordionGroup default value of array which has more than one item doesn't work

Expected Behavior

IonAccordionGroup default value of array which has more than one item works normal

Steps to Reproduce

the code is the screenshot above. Or maybe you can clone git@github.com:XueMeijing/ionic-test.git to recurrent it

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/Users/xue/.nvm/versions/node/v10.24.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 6.0.1

Capacitor:

Capacitor CLI : not installed
@capacitor/android : not installed
@capacitor/core : 3.3.3
@capacitor/ios : 3.3.3

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v10.24.1 (/Users/xue/.nvm/versions/node/v10.24.1/bin/node)
npm : 6.14.12
OS : macOS Big Sur

Additional Information

No response

[averyjohnston]

Thanks for the issue, I'm able to replicate this. When you set an attribute to an array in React, it gets parsed as comma-separated strings:

This is causing Ionic to improperly parse the array, leading to buggy behavior. I confirmed that this is only happening in React. I think we could have the accordion group parse comma-separated lists as arrays; I'll go ahead and flag this as a bug so we can investigate further.

In the meantime, as a workaround, you can set the value via JS instead:

document.querySelector('ion-accordion-group').value = ['colors', 'numbers'];

Side note: if we decide to make the JS route the official usage, we'll need to update the usage examples in the docs.

[XueMeijing]

Thanks for the issue, I'm able to replicate this. When you set an attribute to an array in React, it gets parsed as comma-separated strings: This is causing Ionic to improperly parse the array, leading to buggy behavior. I confirmed that this is only happening in React. I think we could have the accordion group parse comma-separated lists as arrays; I'll go ahead and flag this as a bug so we can investigate further.

In the meantime, as a workaround, you can set the value via JS instead:

document.querySelector('ion-accordion-group').value = ['colors', 'numbers'];

Side note: if we decide to make the JS route the official usage, we'll need to update the usage examples in the docs.

Thanks for your reply and workaround. The workaround works well. Wish you investigate successfully and have have a good day~

[averyjohnston]

I discovered that this issue likely extends to any component that can take arrays for their values. For example, this also applies to the upcoming multiple feature for ion-datetime. The workaround is the same regardless of component (set the value via JS instead).

[philjones88]

Hit this too, I'm nearly there with this more React'y approach, the initial value isn't set though as I suspect the useEffect fires too early for the accordionGroupRef.current to be populated:

  const accordionGroupRef = useRef<null | HTMLIonAccordionGroupElement>(null);
  const [openAccordionRows, setOpenAccordionRows] = useState<string[]>(['0']);

  // This works around an Ionic bug of assigning arrays in JSX, see:
  // https://github.com/ionic-team/ionic-framework/issues/25041
  useEffect(() => {
    if (!accordionGroupRef.current) {
      return;
    }

    accordionGroupRef.current.value = openAccordionRows;
  }, [openAccordionRows]);

  const handleAccordionChange = (e: IonAccordionGroupCustomEvent<AccordionGroupChangeEventDetail<string[]>>) => {
    setOpenAccordionRows(e.detail.value);
  };

return <IonAccordionGroup onIonChange={handleAccordionChange} multiple>...</IonAccordionGroup>;