Type new option

[smith15973]

Is there a way to make this either a select or you can type in the search box to create a new option. I want the user to be able to select from a list of ingredients but also be able to enter a new ingredient if it is not already in the list of options

[azeezat]

@smith15973 Thanks for the question. The library has been updated to address your use case

Please use the example below

const [ingredients, setIngredients] = useState<string>([]);
  const [ingredientOptions, setIngredientOptions] = useState<any[]>([
    {label: 'Pepper', value: '1'},
    {label: 'Oil', value: '2'},
  ]);

  <DropdownSelect
            label="Ingredient"
            placeholder="Select or add ingredients..."
            options={ingredientOptions}
            selectedValue={ingredients}
            onValueChange={(itemValue: any) => setIngredients(itemValue)}
            isMultiple
            isSearchable
            primaryColor={'deepskyblue'}
            listEmptyComponent={
              <View
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  paddingVertical: 10,
                }}>
                <Pressable
                  onPress={() =>
                    setIngredientOptions([
                      ...ingredientOptions,
                      {label: searchTerm, value: searchTerm},
                    ])
                  }
                  style={{
                    backgroundColor: 'blue',
                    borderRadius: 5,
                    width: 120,
                    padding: 5,
                  }}>
                  <Text style={{color: 'white', textAlign: 'center'}}>
                    Add ingredient
                  </Text>
                </Pressable>
              </View>
            }
            searchControls={{searchCallback: value => setSearchTerm(value)}}
          />
          ```

[azeezat]

Check the sandbox for examples