Affected Projects
React
Library Version: 3.6.1
Describe the bug
When using transformData to format labels, the URLParams use the transformed label in the URL.
For example (see sandbox below) if changing the label from mylabel to transformed mylabel the multiList query ends up using transformed mylabel as a filter in the query instead of mylabel.
Thus this creates wrongful queries (likely returning no results).
To Reproduce
Just use some dummy transformData and set URLParams.
E.g: https://codesandbox.io/s/nifty-ritchie-bwxxn
If you select a label the whole list disappear because it becomes filtered on a label not in the list and you can see that the URL used the transformed label instead of the original one.
Expected behavior
URLParams should use the original label pre-transformation or revert to the original label for the query.
Screenshots
No screenshot but an example of URL produced from the sandbox:
https://bwxxn.codesandbox.io/?MyMultiList=%5B%22transformed+Hidden%22%5D
when the correct one would be:
https://bwxxn.codesandbox.io/?MyMultiList=%5B%22Hidden%22%5D
Desktop (please complete the following information):
I don't think this is a bug. transformData is not meant for setting the option labels, but rather to make "data" adjustments before "presentation". For example, you would use transformData if you want to remove an option or sort the options.
Whereas your use case is a "presentation" transformation: you don't want to change the data, but just how it is displayed. The best way to handle your use case would be to use renderItem.
Ok fair enough. I misunderstood the transformData philosophy. In my defense the doc on transformData is a little misleading as it mentions:
allows transforming the data to render inside the list. You can change the order, remove, or add items, transform their values with this method
Also did not realize renderItem was "modular". I was under the impression that one had to basically rewrite the JSX to keep the style and make a change. Just realized you can just do e.g.: renderItem={(label) => `transformed ${label}`} to change the label 馃檪
Super cool, closing this then. Thanks a lot @acosta-edgar !
Most helpful comment
I don't think this is a bug.
transformDatais not meant for setting the option labels, but rather to make "data" adjustments before "presentation". For example, you would usetransformDataif you want to remove an option or sort the options.Whereas your use case is a "presentation" transformation: you don't want to change the data, but just how it is displayed. The best way to handle your use case would be to use
renderItem.