Feature request: ability to switch off editable mode.

[gsanta]

In our project we use dropdowns in varous places, and I would like to use exclusively react-selectize everywhere. But in some places we don't need the search ability of react-selectize.

It would be nice if we could switch it off and have it work like a simple dropdown.

(In the api there is an 'editable' option, but I couldn't really figure out what that means)

[furqanZafar]

react-selectize is a controlled component, so if you need to block the search capability all you need to do is set the search prop to an empty string:

<SimpleSelect
    search = ""
/>

[gsanta]

You are right that search='' does not allow to type into the component. But the cursor is still blinking there and the input can be removed with backspace.

What I really meant is the functionality similar to a regular dropdown, where you can only select from the dropdown list, with no cursor and no backspace functionality. (Because I guess if you don't want the user to be able to search the blinking cursor is a little misleading)

[gsanta]

I was using previously react-select, and for example there is a 'searchable' property, that does exactly what I'm talking about.

(that's an other story why I abandoned react-select in general I like react-selectize way better)

[furqanZafar]

yes this mode is not supported at the moment via a prop, but as a workaround you can hide the blinking cursor using css something like display: none for the resizable-input css-class

[gsanta]

Yes I tried it, but unfortunately, it ruins the cursor navigation (you can not navigate through the dropdown list with the cursor, and even if you hit enter or click with the mouse outside of the dropdown the dropdown list won't close). I think it must depends on some input event (blur maybe), and setting it to display: none, the event wont fire anymore.

I also tried to set the opacity to zero, it worked for chrome and firefox, but not for IE (the same navigation problem).

So I haven't been able to find a general css solution for this problem.

[ndugger]

I'm also interested in this feature. I'm trying to get away from react-select because it does not support the dropdown direction like this component does, but then this one does not allow you to turn off editing.

[proddam]

I need this feature too.

But if you use onOpenChange and ref, you can achieve this feature at the moment.
In the handler function for 'onOpenChange' you should call blur() on the SimpleSelect.

...
onOpenChangeHandler = open => { if (!open) this.refs.theSimpleSelect.blur() }
...
<SimpleSelect 
  ...
  ref='theSimpleSelect'
  onOpenChange={this.onOpenChangeHandler}
  ...
>

[Vpr99]

@proddam how do you keep the dropdown open using your workaround? As soon as I .blur() the select it closes the options menu.

[proddam]

@Vpr99 Sorry that I don't know how to keep the menu open after .blur() has been called.

[PhilR8]

hack that is currently working for me in my react-redux app (but only tested in Chrome):

// JSX
<SimpleSelect
    ...
    search = ""    
    onValueChange={props.handleSimpleSelectChange}
    ...
/>

...

const mapDispatchToProps = ( dispatch ) => ( { 
    handleSimpleSelectChange: ( selectedValue ) => {
        // guard against backspace
        if ( selectedValue !== undefined ) {  
            // logic
        }
    }
} );

/* css */
input {
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
}

[modestguy]

@PhilR8 oh....thank you! you saved my time!