alwaysRenderItemSelected prop not taking effect

[SitrucL]

Hi, I'm loving this library but it seems as though the alwaysRenderItemSelected prop isnt taking effect when set to false. Based on the description within the ReadMe, I expect the selected items to no longer appear underneath. Below is my implementation and a screenshot of the result.

      <View style={styles.container}>
            <MultiSelect
                style={styles.dropdown}
                disable={data.length === 0}
                activeColor="transparent"
                dropdownPosition="bottom"
                alwaysRenderItemSelected={false}
                search={false}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.selectedTextStyle}
                containerStyle={styles.container}
                selectedStyle={styles.selectedStyle}
                itemContainerStyle={styles.itemContainer}
                iconStyle={styles.iconStyle}
                renderItem={renderItem}
                data={data}
                labelField={labelField}
                valueField={valueField}
                placeholder={placeHolderText}
                searchPlaceholder="Search..."
                value={selected}
                onChange={(item) => {
                    setSelected(item);
                }}
            />
        </View>

[hoaphantn7604]

hi @curtis-j-campbell , alwaysRenderItemSelected default is "false". You can just set "true" or leave it as a default

[SitrucL]

Just to clarify, is the alwaysRenderItemSelected prop meant to hide the items in the image above? If that is the intended behaviour, it doesn't seem to work. Is there a way to not display the groups that have been selected from the dropdown?

[hoaphantn7604]

hi @curtis-j-campbell , Refer this example:

import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import { MultiSelect } from 'react-native-element-dropdown';

const data = [
  { label: 'Item 1', value: '1' },
  { label: 'Item 2', value: '2' },
  { label: 'Item 3', value: '3' },
  { label: 'Item 4', value: '4' },
  { label: 'Item 5', value: '5' },
  { label: 'Item 6', value: '6' },
  { label: 'Item 7', value: '7' },
  { label: 'Item 8', value: '8' },
];

const MultiSelectComponent = () => {
  const [selected, setSelected] = useState([]);

  const renderItem = (item: any) => {
    const hiddenItem = selected.filter((e: any) => e === item.value).length > 0;
    if (hiddenItem) {
      return null;
    }

    return (
      <View style={styles.item}>
        <Text style={styles.selectedTextStyle}>{item.label}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <MultiSelect
        statusBarIsTranslucent={true}
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={data}
        labelField="label"
        valueField="value"
        placeholder="Select item"
        value={selected}
        search
        searchPlaceholder="Search..."
        onChange={(item) => {
          setSelected(item);
        }}
        renderItem={renderItem}
        renderSelectedItem={(item, unSelect) => (
          <TouchableOpacity onPress={() => unSelect && unSelect(item)}>
            <View style={styles.selectedStyle}>
              <Text style={styles.textSelectedStyle}>{item.label}</Text>
            </View>
          </TouchableOpacity>
        )}
        alwaysRenderItemSelected
      />
    </View>
  );
};

export default MultiSelectComponent;

const styles = StyleSheet.create({
  container: { padding: 16 },
  dropdown: {
    height: 50,
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 12,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 14,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
  icon: {
    marginRight: 5,
  },
  item: {
    padding: 17,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  selectedStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 14,
    backgroundColor: 'white',
    shadowColor: '#000',
    marginTop: 8,
    marginRight: 12,
    paddingHorizontal: 12,
    paddingVertical: 8,
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,

    elevation: 2,
  },
  textSelectedStyle: {
    marginRight: 5,
    fontSize: 16,
  },
});

[hiren-devstree]

any update on this issue?

[hoaphantn7604]

hi @hiren-devstree, This is not an issue. alwaysRenderItemSelected is the feature, when the dropdown is opened you have the choice to show Items selected values or hide Items selected.