Reactivesearch: [MultiList] URLParams not working with transformData

Created on 21 Mar 2020  路  2Comments  路  Source: appbaseio/reactivesearch

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

  • OS: macOS Catalina
  • Browser: Chrome
  • Version: 80.0.3987.132
bug

Most helpful comment

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.

All 2 comments

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 !

Was this page helpful?
0 / 5 - 0 ratings

Related issues

willopez picture willopez  路  3Comments

scheiblr picture scheiblr  路  3Comments

mrtinkz picture mrtinkz  路  3Comments

vharitonsky picture vharitonsky  路  4Comments

dmce picture dmce  路  3Comments