fateh999 / react-native-paper-dropdown

Dropdown using react native paper TextInput and Menu
MIT License
132 stars 73 forks source link

multiselect gets index before splitting, causing issues with numerical lists or any unique values that contain substrings of other unique values #107

Closed rook218 closed 2 months ago

rook218 commented 4 months ago

https://github.com/fateh999/react-native-paper-dropdown/blob/master/src/DropDown.tsx#L127-L128

In these lines, if you have a list like this:

ant,dog,antelope,anteater,penguin

Then you can't appropriately select / deselect ant.

That's because the code checks for an instance of ant in the entire substring, not in a split array of values.

Similarly, if your values are 1,3,7,10,0,30 then you can't select/ deselect 1, 0, or 3 because after you remove 1 from your list of values, '3,7,10,0,30'.indexOf(1) will return > -1 so the dropdown logic still thinks that '1' is in the list of selected values.

So it's necessary to split the string into an array before checking for the index.

rook218 commented 4 months ago

This can be resolved by changing these method signatures to the following https://github.com/fateh999/react-native-paper-dropdown/blob/master/src/DropDown.tsx#L113-L141

    const isActive = useCallback(
      (currentValue: any) => {
        if (multiSelect) {
          return value.split(',').indexOf(currentValue) !== -1;
        } else {
          return value === currentValue;
        }
      },
      [value]
    );

    const setActive = useCallback(
      (currentValue: any) => {
        if (multiSelect) {
          const values = value.split(",");
          const valueIndex = values.indexOf(currentValue);
          if (valueIndex === -1) {
            setValue([...values, currentValue].join(","));
          } else {
            setValue(
              [...values].filter((value) => value !== currentValue).join(",")
            );
          }
        } else {
          setValue(currentValue);
        }
      },
      [value]
    );

Diff can be seen here: https://diffcheck.io/y-hricPbTaWnxwB9q4

rook218 commented 4 months ago

@fateh999 I'm not able to create a branch so that I can start the PR process to fix this breaking bug - what is the appropriate way to go about it?

rook218 commented 4 months ago

Just found that it also needs a split on this line: https://github.com/fateh999/react-native-paper-dropdown/blob/master/src/DropDown.tsx#L101

.filter((_) => value.split(',').indexOf(_.value) !== -1)

fateh999 commented 2 months ago

Should be fixed in latest release v2.0.2, did a full refactor of library so docs are in WIP, meanwhile you can check the example folder for demo code.