The following line modifies the selectedValues in place thus causing the props to be changed by reference and potentially affecting the calling code. If splice is needed, then a shallow copy of the variable should be made before.

This is likely because componentDidUpdate does not make a shallow copy when assigning the value to the local state, while the constructor does.

Constructor:

ComponentDidUpdate:

selectedValues doesn't work as expected, when is this issue will be solved, thanks

I am trying to use this to select the same item more than once but it is preventing me from doing that.

Hi,

I'm trying to use your component, but it is failing during build in Gatsby.

error "window" is not available during server side rendering.
ReferenceError: window is not defined

Should I use lib such as @loadable/component or is there something to make module working in SSR?

Can you please help on this ?

//constructor code

private multiselectRef: React.RefObject
constructor(props:MyProps) {
super(props);
this.multiselectRef= React.createRef();
}

//Method for
getSelectedValues=()=>{
const a : HTMLSelectElement = this.multiselectRef.current as HTMLSelectElement ;
a.resetSelectedValues();
}

//component calling

Hi Srigar,

When you choose the multi select with checkbox mode and click on an option's checkbox, it hides the list immediately and adds the chip. It could be better if you let the user select all items without having to click on the drop down field to re-show the options.

Makes sense? Let me know how I can help.

~~
Manoj.

When you remove chips the searchbox becomes focused thus making the dropdown show.

Is it possible to avoid this and when a chip is removed to not focus the searchbox?

I am not able to change the placeholder text color using style object.

How to change the placeholder color in style props of Multiselect?

Hello,
I get this warning when using this library:

Warning: Each child in a list should have a unique "key" prop

I added a unique key to each item I'm rendering in the dropdown, but this warning doesn’t go away. I also followed the examples you have, but this issue is still there. Are you providing a unique key for each item in the dropdown list in the source code?

Would you consider adding a prop to allow the placeholder text to be hidden if there are any values selected? I'd like to just be able to show the text if there are currently no options selected, it's a pretty common feature.

When i fetch data from an api and set the state and use that state in multiselect comopnent it show me no option available i also correct the format but it only work on static data???? any idea???

Virtual scrolling or lazy loading feature for multiselect dropdown

Removing a selected item from the search bar using backspace does not fire the onRemove callback.

Backspacing removes it from the search bar and unchecks the checkbox, however onRemove is not called

Hi,

For eslint and w3c validation it would be a great feature if we could pass along an 'id' for the input filed.
Something like this:

                    <label htmlFor="my-id" className="form__row">
                        <span className="form__label visually-hidden">
                          My list
                        </span>
                        <Multiselect
                          id="my-id"
                          name="my-dropdown"
                          placeholder="Dropdown"
                          options={list}
                          closeIcon="close"
                          displayValue="displayText"
                        />
                    </label>

So the generated input filed would have and id="my-id"

<input type="text" id="my-id" class="searchBox" placeholder="Portfolio" value="">
Thank you!

When isObject is false element scroll to top and hide the dropdown

Hi,
I am using the dropdown with checkboxes, but for some reason I am unable to select/deselect items by single click either on text or checkbox. Works only on double click. Is it by design?

I'm getting error on searchWrapper.current.removeEventListener() : Failed to execute 'removeEventListener' on 'EventTarget': 2 arguments required, but only 0 present.

The issue happens in the example 5. Multiselect with checkbox.

1. Open the list and type "3"
2. Click on "Option 3"
3. Open the list again and find just "Option 3" as available option (bug)
4. Type any character and delete it to show all the options again.

can you please provide a sample?
We have below mentioned structure :)

`import React, { useEffect, useState, useCallback, useRef } from 'react';
import { hot } from 'react-hot-loader';
import { Multiselect } from "multiselect-react-dropdown";

const DropDown = () => {

useEffect(() => {
}, []);
return (

Hello

export default hot(module)(DropDown)`

Hi,

Is there anyway to have the chips be of different colours based on the position in the selected list and an array of colours as in input?

I want this dropdown to be show the selected series on a chart and I need the chip background colour to be the same as the series graph

Simple Use case where I need to show user Icon as well as name.
Well in that case there should be customization props available to render own component.

Let me know if this is currently doable.

Is there a way to programmatically deselect manually set options?
In addition, is there a way to programmatically select options AFTER the component has been loaded (selectedValues will still be empty).

If not, how and when can this be added?

When the list is long and we selected too many options, searchbox/container become very long, any CSS style to limit/autowrap the selectedItems?

Could you provide a flag to only show the number of selected items instead of the actual selections. The use-case is when we want to select multiple filters for large data sets.

If we have a target element, say a Multiselect Dropdown, when we click into the element and then if we click outside of this element or any other element, the focus shift to recently clicked element but the previous dropdown remains open.

I created a reusable component with Redux when I am using one page it is working fine but in case of navigating to other page it is not working as expected

The style object should gives us the capability to change the hover color for options.

It would be great if there were option to make dropdown stay open on item selection.

It is useful, if user often selects several options in a row.

Option for single select like a normal dropdown.

I am using this library for multiselect dropdown with check box. I am able to see dropdown and can select multiple options too.. And at the same time, I am getting the warning that Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

This is my code:

<Multiselect 
	options={OPTIONS_DATA}
	displayValue="key"
	showCheckbox={true}
	onSelect={this.onSelect}
/>

where OPTIONS_DATA is my array object and onSelect is my method..
Please help me out.. How can I fix this!!!!

I first noticed it in my project, but it also happens in https://codesandbox.io/s/10xn41w767
The first option of the dropdown is highlighted by default when the expected behaviour would be to not have anything highlighted when nothing is yet selected.

1. First option is not highlight in my local
2. When enter key pressed added empty tag.
3. Search value in input is not clearing after selecting the value from search results

Tags multiselct.zip

I've checked the code and found that for "singleSelect" is false, you're not displaying the dropdown icon. But as per my requirement, I want to display for multi select and dropdown icon as well. Could you please suggest, how to achieve this.

When I type into the input field (to search), the screen scrolls such that the input field is at the very top of the screen. Any way to prevent this from happening?

(The same behavior happens in the demo code for the very first dropdown: as soon as you type a letter into the input field, the screen scrolls so that the input field is at the very top of the screen)

Please can you add an option to select all the options at once

Library crashes when user selects an option and it's reproducible in your https://codesandbox.io/s/10xn41w767 too

There is an id-attribute in the Multiselect-component, which is hard-coded and cannot be changed:

id="multiselectContainerReact"

So if you have two Multiselect-components on a page, then you also have two duplicate id:s on the page. This should be fixed since id:s have to be unique.

In multi select drop down with object having unique id but options values is same, if i select one item it is also selecting another item as well.

disable chrome autocomplete opening on "serachBox" input focus

It is not working for keyboard sir. if i enter a key from keyboard it is not working rather it sent me to the bottom of the page any solution if u have kindly provide ASAP. Thanku

I need the ability to disable user input. A simple property named disabled could be sent that prevents any user interaction with the control. Right now, I am approximating this behavior by setting the options equal to the selectedValues and disablePreSelectedValues to true.

However, the dropdown still appears on click so I set the emptyRecordMsg to "". Unfortunately, it still appears but it is blank.

Hopefully there would be a way to customize checkbox.
Maybe even encapsulating the text within a label tag would make it possible already

normally every option in a select dropdown would have a value and a text currently, with the 'displayValue' prop I am only getting the name which is correct since the options should only display the name and not the value but in the backend, I would actually need the value of the option selected. I am not seeing any prop which would get me the value of the option

Hi Guys,

Thanks for awesome multiselect.

I have found one case when I put options ['A','B','C'] with preselected value 'A' and single select flag true. Once the dropdown shows up with preselect value 'A', the dropdown only shows ['B', 'C'] which is expected. However, when you select 'B' or 'C', the dropdown never show 'A' in the options. Also, 'B' or 'C' are still there.

Is this expected or not?

I am using the version 1.3.0 as suggested by you but in that version the preselected attribute is not working can you plz guide me on this???

Hi, thank you for this helpful package.
I'm using the multiselect-react-dropdown as a catalog filter, and I wanted to know if there is a way to unselect values, not by clicking on the close icon of the selected value, but by clicking on my own filter tag.
Below is my example:
I have selected the 'Auto' value from the dropdown options.

I want to unselect it by clicking on my own filter tag:

Thank you !