ionic-framework
ionic-framework copied to clipboard
bug: React, can't set value to array in JSX
Prerequisites
- [X] I have read the Contributing Guidelines.
- [X] I agree to follow the Code of Conduct.
- [X] I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- [ ] v4.x
- [ ] v5.x
- [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 [email protected]: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
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 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~
I discovered that this issue likely extends to any component that can take arrays for their value
s. 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).
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>;
I have a similar problem but with the multiple feature in ion-datetime component (Angular). I can't set an array with multiple custom values to ion-datetime.
I already asked for help in Ionic forum because I don't know if it's a Docs problem, a bug or a new feature that should be added.
Here is my topic in Ionic Forum: https://forum.ionicframework.com/t/ion-datetime-set-multiple-custom-values/236133
Note: I also tried the above workaround, and it didn't worked.