I would like to be able to clear all the values by setting the prop of values to []. Here is an example:

https://codesandbox.io/s/3865jq6ql1

But this doesn't set the values in state it seems. The reason I'm doing it this way is because I'm loading up saved state from localStorage. Any guidance would be appreciated.

Hi,
I need to auto-select the drop-down on load.
please suggest the solution.

https://codesandbox.io/s/eager-morning-q4wys

In your demo change the following:
searchBy : username to name
labelField : username to name
valueField: email to address

If the value field is json object then the demo is not working and shows the error "Encountered two children with same key"

So your library is not supporting the json kind of value field

When loading the data into the Select you see none.
Example: https://codesandbox.io/s/nervous-golick-3c8xr

Whenever a Select is mounted onChange function is getting executed, which should not happen as the component data is not getting changed initially.

Hi @sanusart
I was trying using your component, but with a simple setup (from the code below ) I always getting an error about the "key" prop which is missing in Dropdown component
Am I made something wrong?

Each child in a list should have a unique "key" prop.
Check the render method of Dropdown.

<Select
  options={[
    {
      id: "1654as6d54as",
      label: "label 1",
      name: "Tony"
    },
    {
      id: "2asdasdsadsas654",
      label: "label 2",
      name: "Tony's uncle"
    }
  ]}
  onChange={values => console.log(`%c > onChange ${values}`)}
/>;

Currently I've got two Select components on my page. The second select's options set depends on what option is selected in the first select component. When having selected something in the second components options and then swapping to another option in the first select, the second select box's options change however the currently selected item which is shown in the Select does not change.

Is there a way to combat this? I'm not sure if I'm being stupid and missing the obvious.

should change to

import React,{ SyntheticEvent, KeyboardEvent } from 'react'; 

I have a couple of searchable dropdowns on a page, and when I use tab to cycle, they become focused, but the searchable input is not. I have to click to open and them make the search.
Is it possible to expose an onFocus callback?
Or if the dropdown is focused and searchable... It should allow to search on key down?

not supported for Server Side Rendering

Hello, when using the portal option and dropdown="auto", the dropdown does not appear above the select input as expected when it is at the bottom of a page. Instead it clips the the dropdown underneath the slider to fit in the window.

It would be really helpful, for our testing purposes, to be able to pass data-* attributes through to the select and also an id attribute. Currently these properties are not passed to the component when provided in the Select tag.

Problem:
When deaktivating tab-behavior inside of the handleKeyPress-callback by something writing like this:

if (key === 'tab') {
  methods.dropDown('close');
  return true;
}

the select can't be blurred.

Solution:

Prevent event-bubbleing and set tabindex of the input in index.js to -1.

Currently, I am showing multiple Selects on the screen that offer the same options, this leads to React complaining about duplicate keys. There are no alternative options for me at this time, and while no specific issues occur at this time, allowing us to set a pre or post fix to the generated key would allow us the ability make them unique in this case. While it works now, I'd like to make sure it works into the future without warnings/errors.

I'm currently finishing up a project I'm on right now, after that is complete I can look at spending some time to try to implement something simple as a pull request if you like the idea and someone hasn't beaten me to it (or maybe there already is a solution I missed?).

https://codesandbox.io/s/3kx74jlp0m

Click next to the x (on the left, not too far from the x) once to open the dropdown and then click on the same place again. The input does not get focus although there is a blue border indicating focus.

Can you please add callbacks as options for valueField/labelField to access data? We use nested data structure so need something like: labelField={(item) => { return item.attributes.name;}}

Currently you're just assuming data structure are flat.

Hi Sasha,

we are using react-dropdown-select component in our project. It really works great but we have one issue with typescript.

When giving a own searchFn to the component, typescript brings up an error because the function is typed as () => void. May it be possible to chenge the type to something like 'searchFn?: ({ props, state, methods }: IRenderer) => object[];' ?

A lot of thanks and best wishes
Max

The name props inside types.d.ts ISelectProps is assigned to type "null" instead of "string?"

Current Interface

export interface ISelectProps {
addPlaceholder: '';
placeholder: 'Select...';
values: [];
options: [];
multi: false;
disabled: false;
searchBy: 'label';
sortBy: null;
clearable: false;
searchable: true;
dropdownHandle: true;
separator: false;
keepOpen: undefined;
noDataLabel: 'No data';
createNewLabel: 'add {search}';
disabledLabel: 'disabled';
dropdownGap: 5;
closeOnScroll: false;
debounceDelay: 0;
labelField: 'label';
valueField: 'value';
color: '#0074D9';
keepSelectedInList: true;
closeOnSelect: false;
clearOnBlur: true;
clearOnSelect: true;
dropdownPosition: 'bottom';
dropdownHeight: '300px';
autoFocus: false;
portal: null;
create: false;
direction: 'ltr';
name: null;
onChange: () => void;
onDropdownOpen: () => void;
onDropdownClose: () => void;
onClearAll: () => void;
onSelectAll: () => void;
onCreateNew: () => void;
searchFn: () => void;
clearRenderer: ({ props: ISelectProps, state: IState, methods: IMethods }) => void;
contentRenderer: ({ props: ISelectProps, state: IState, methods: IMethods }) => void;
dropdownRenderer: ({ props: ISelectProps, state: IState, methods: IMethods }) => void;
dropdownHandleRenderer: ({ props: ISelectProps, state: IState, methods: IMethods }) => void;
inputRenderer: ({ props: ISelectProps, state: IState, methods: IMethods, inputRef: any }) => void;
itemRenderer: ({
item: number,
itemIndex: number,
props: ISelectProps,
state: IState,
methods: IMethods
}) => void;
loadingRenderer: ({ props: ISelectProps }) => void;
noDataRenderer: ({ props: ISelectProps, state: IState, methods: IMethods }) => void;
optionRenderer: ({ item, props: ISelectProps, state: IState, methods: IMethods }) => void;
separatorRenderer: ({ props: ISelectProps, state: IState, methods: IMethods }) => void;
}

Error thrown in typescript
->Type '"Search..."' is not assignable to type '"Select..."'.
-> Type 'true' is not assignable to type 'false'.

Creating a select in a typescript environment: (pseudo code)

let options, // = options from somewhere
  onChange // = onChange from somewhere
<Select className={'class'} options={options} values={[]} onChange={onChange}/>

yields the error:
Property 'className' does not exist on type 'IntrinsicAttributes & ISelectProps & { children?: ReactNode; }'.

Observing types.d.ts in the npm package, there is no entry for className. Fixable by adding a line like:
className?: string; to interface ISelectProps

Workaround is to add monkey patch in code files that need className for Select:

...
declare module 'react-dropdown-select' {
  interface ISelectProps {
    className?: string;
  }
}
...

It seems like regardless of setting the height the outer dropdown stays at roughly 36px. I've attempted this via a styled component, a normal css class, and React inline styling to no avail.

const dynamicStyle = (props) =>
            css`
                background-color: ${props};
                color: ${props};
                height: 10px !important;
            `;
const StyledSelect = styled(Select)`
            ${dynamicStyle};
            height: 10px !important;
            background-color: #A0E6FF;
            .react-dropdown-select {
               ${dynamicStyle};
            background-color: #A0E6FF;
            }
            .react-dropdown-select-clear,
            .react-dropdown-select-dropdown-handle {
               ${dynamicStyle};
            }
            .react-dropdown-select-option {
               border: 0;
            }
            .react-dropdown-select-item {
               ${dynamicStyle};
            }
            .react-dropdown-select-input {
               ${dynamicStyle};
               height: 10px;
               background-color: #A0E6FF;
            }
            .react-dropdown-select-dropdown {
                position: absolute;
                left: 0;
                border: none;
                width: 100%;
                padding: 0;
                display: flex;
                flex-direction: column;
                border-radius: 0;
                //max-height: 300px;
                //height: 300px;
                overflow: auto;
                z-index: 9;
                ${dynamicStyle};
            }
            .react-dropdown-select-item {
                ${dynamicStyle};
            }
            .react-dropdown-select-item.react-dropdown-select-item-selected,
            .react-dropdown-select-item.react-dropdown-select-item-active {
               border-bottom: 0;
               height: 10px;
            }
            .react-dropdown-select-item.react-dropdown-select-item-disabled {
               ${dynamicStyle};
            }
        `;

        <StyledSelect
           color={this.props.user.tertiary}
           background-color={this.props.user.secondary}
           placeholder={"Select"}
           searchable={false}
           clearable
           options={this.props.config.choices}
           style={{borderWidth: 0, height: 10}}
           // onChange={this.handleChange}
        />

First of all, awesome job. I am impressed.

See this demo:
https://sanusart.github.io/react-dropdown-select/examples

I would like to allow my users to fill any data they desire manually, while also allow the ability to select a pre-existing option from the dropdown.

The problem is, if a test is typed in the field, it disappears on the input's blur event...

Is there a solution to this?

Thanks!

Expected behavior:
The input should not be selectable when it is disabled using the tab-key.

Current Behavior:
The input is selectable via tab-key and the dropdown is visible.

Fix:
Set tabindex to -1 on outer container when disabled and don't render options-list.

No styles are present inside the dropdown.

Hi there,
we are currently trying to use the react-dropdown-select in our project. Is it possible to override the handleKeyDown Function of index.js line 346?
We would really appreciate to handle it by ourselves because we want to use tabs, open the dropdown on input and so on.

Thank you and best wishes
Max

https://codesandbox.io/s/3kx74jlp0m

click on the input to show the dropdown list.

click down keyboard key many times. more times than there are dropdown items.
The selection seems to go far beyond the last item, and for every down click past the last item, you'll need an up key to bring it back up, until it actually reaches the last item again.

What I did in my script, Tagify, was to cycle the list items, so after the last one you'll get to the top one again.

Maybe I am not clear on how clearOnSelect works but I am would like the users to select one item from the select menu which calls the onChange method but not remember the items so the user can search for a new item right away. I will be showing the selected results in another component.

<Select
    searchable={true}
    clearOnSelect={true}
    clearOnBlur={true}
    options={items}
    onChange={values => console.log(values)}
/>

https://stackblitz.com/edit/react-mzsu7r

There's uncontrolled state changing spam happening, please see the attachment above.
I believe setting a value to 'dropdownPosition' prop should preserve checking for boundaries

Hi Sasha,
we have an issue with test automation when the dropdown is a required field. Is it possible to add the required flag to the html of the component?

Thanks a lot and best wishes
Max

The span element used in the dropdown content is not able to be restricted to its parents size. My use case is being able to set the dropdown to a particular size and any options with labels too long having ellipsis applied in the content.

The below screen shot shows a name that is too long for the parent size, the span overflows the parent and the text is unreadable.

The below screen shot shows desired behaviour which can be achieved by swapping the span element for a div element

I was trying to set the values prop externally to the Select dropdown. It would work perfectly when the reference of the values props are same. But if we are using redux or any other external state management it will not work.

I created a small reproducible scenario here.
https://codesandbox.io/s/external-clear-68i29

I have also had a look at the code and the issue which i suspect is

We may need to have a proper array comparison here.
eg:

 JSON.stringify(prevProps.values) ===  JSON.stringify(prevState.values)

Let me know if you need any more info from my side!

thanks for the nice lib.

dropdownHandleRenderer need to be simpler, only render the icon/component, no need for methods.

Or maybe HOC need to be used. Need to decide.

Hello, I've found out that creating my own component to represent ListItem in TS is a bit difficult.

Methods don't accept any parameters in types, so getting it to work later on requires either //@ts-ignores or just always checking at the beginning if(param!==undefined).

Maybe I'm doing something wrong, in which case, please let me know.

closeOnScroll={true} not helping when I'm in modal and portal={document.body}
Is it need to work in this situation ?

When I implement Select something like this:

const [value, setValue] = useState('1');
const onChange = (changedValue) => {
    setValue(changedValue);
}
return <Select values={value} options={['1', '2', '3']} onChange={onChange} />

And then pick 2 as the new option, you actually trigger an endless loop.

This is the case, because in componentDidUpdate in your index.js (Select), you call

onChange with the old state value, then afterwards update your state with the new value given from outside. This means, it will jump from old to new to old to new value (and so on) in our case (with Redux Saga handling some changes asynchronously). It's fixed when you write it like this (which conforms with React concept):

componentDidUpdate() {
...
    this.setState({value: this.props.value}, () => {
         this.props.onChange(this.state.value);
    })
}

That way it's using the callback on setState to ensure it only propagates the changed state AFTER it was set on the component state and thus, not propagating the old state. Your order was wrong and even the other way around you cannot rely on setState to be done when onChange is triggered since it works asynchronously.

any thoughts as to how to style the component using css-modules instead of CSS-in-JS? i kindof got around this using global styles, but that also feels pretty gross. would appreciate any guidance.

Declaration files missing for typescript

clicking on the dropdown handle and not the select element causes the dropdown to open and immediately close - almost like a hover effect. I would expect this action to behave in the same way as clicking on the select to open the dropdown

Hi, I try to make the same Dropdown as your baisc example, but I've got Warning: Each child in a list should have a unique "key" prop. error.

I use the same code of this example and the same data taken from Options.js by your CodeSandbox

And in my HTML part i render by this code:

import { options } from './Options';
import Basic from './Basic';

<Basic
    options={options}
    title="example"
/>

And I've got this error:

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

Check the render method of `Dropdown`. See https://fb.me/react-warning-keys for more information.
    in b (created by Dropdown)
    in Dropdown (created by b)
    in div (created by Context.Consumer)
    in ReactDropdownSelect (created by b)
    in div (created by b)
    in b (created by b)
    in b (at Basic.js:13)
    in Basic (at ConfigurationScreenContentPlaylist.js:77)
    in div (at ConfigurationScreenContentPlaylist.js:76)
    in div (at ConfigurationScreenContentPlaylist.js:75)
    in div (at ConfigurationScreenContentPlaylist.js:58)
    in div (at ConfigurationScreenContentPlaylist.js:56)
    in div (at ConfigurationScreenContentPlaylist.js:18)
    in aux (at ConfigurationScreenContentPlaylist.js:17)
    in ConfigurationScreenContentPlaylist (at ConfigurationScreenBase.js:24)
    in div (at ConfigurationScreenBase.js:41)
    in div (at ConfigurationScreenBase.js:34)
    in div (at ConfigurationScreenBase.js:33)
    in aux (at ConfigurationScreenBase.js:32)
    in ConfigurationScreenBase (created by Context.Consumer)
    in Route (at Layout.js:19)
    in aux (at Layout.js:13)
    in layout (at App.js:11)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:10)
    in App (at src/index.js:7)

How can I resolve?

Hi there, Is this feature supported??

Hi Sasha,
currently we are having some troubles with tab-handling. During reasearch I found out, that there is no possibility to give the component an own tabIndex. Might it be possible to give tabIndex as a prop to the main component for setting it to the high div and also to the input component? (we have an own content renderer but currently using the default input)

If you wish us to contribute, just tell me.

Thanks a lot and best wishes
Max

when custom input is passed through inputrenderer props, the app breaks where ref of original input is used. cannot attach ref to the custom input.

this.input.current.focus() is the line that breaks in Input.js

There's no option to close dropdown by clicking dropdown content (selected value) in dropdown 'header'. You can close dropdown by clicking option item or outside the component. Is there any workaround?

Want to set the 1st value in options as the first value as selected. Please suggest some option for it.

Here is my code.

<Select options={timeOptions} value={timeOptions[0]} name="Time Period" />

Thank you.

The core component seems to be adding event listeners on the window object without checking the environment it's being executing on, which causes errors in Node during SSR.

options =[0: {id: "10", value: "10", label: "Channel 1 10", type: "channels", valid_routing_id: 50, …}
1: {id: "1", value: "1", label: "Channel 2 1", type: "channels", valid_routing_id: 41, …}
2: {id: "2", value: "2", label: "Channel 3 2", type: "channels", valid_routing_id: 42, …}
3: {id: "3", value: "3", label: "Channel 4 3", type: "channels", valid_routing_id: 43, …}
4: {id: "4", value: "4", label: "Channel 5 4", type: "channels", valid_routing_id: 44, …}
5: {id: "5", value: "5", label: "Channel 6 5", type: "channels", valid_routing_id: 45, …}
6: {id: "6", value: "6", label: "Channel 7 6", type: "channels", valid_routing_id: 46, …}
7: {id: "7", value: "7", label: "Channel 8 7", type: "channels", valid_routing_id: 47, …}
8: {id: "8", value: "8", label: "Channel 9 8", type: "channels", valid_routing_id: 48, …}
9: {id: "9", value: "9", label: "Channel 10 9", type: "channels", valid_routing_id: 49, …}
];

/* This is where I am invoking the object, 6th option onwards I cannot select. I had to degrade my npm module to 2.0.0 from 2.2.3 and it is working fine */

<MultiSelect
            values={preSelectedValues}
             options={options}
            searchable={false}
            onChange={(arr) => optionClicked(arr)}
            onDropdownClose={() => this.closeDropDown()}
            onDropdownOpen={() => this.openDropDown()}/>

When you add an item in multi this check will always return -1

if (this.state.values.indexOf(item) !== -1) {

since item is an object and values is an array of objects

it should be
this.state.values.findIndex(value => value.label === item.label)

or similar you can't compare to objects like that in indexOf in Javascript

It is really really useful component. I love that. But Is there typescript support ?

It seems weird to me that two items can be highlighted at the same time from the dropdown list. one with the keyboard and another one with the mouse, and each has a slightly different style. The keyboard one seems to have a "bold" text.

Is this a feature or a bug?

Is there a way to have searchFn accept an async function or promise? All my API lookups use async functions and I can't seem to find any other function that will allow for the intercepting of the search to populate the values in the dropdown?