React Select disable options

react-select required
react-select width
react multi select
react-select box
react-select css
react-select get value
react-select group
react-select clear value

I'm having issues disabling certain options within a large list within a React Select element. I have around 6,500 options that get loaded into the select. At first I was having issues with the search functionality lagging but then I started using react-select-fast-filter-options which took care of that problem. Now the issue is that I need to disable certain options depending on the propType "picks". Here is the code:

import React, {Component} from 'react'
import PropTypes from 'prop-types';
import 'react-select/dist/react-select.css'
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'
import Select from 'react-virtualized-select'
import createFilterOptions from 'react-select-fast-filter-options';

let options = [];
if(typeof stockSearchStocks !== 'undefined') {
    //loads in all available options from backend by laying down a static js var
    options = stockSearchStocks
}
const filterOptions =  createFilterOptions({options});

class StockSearch extends Component {
    static propTypes = {
        exchanges: PropTypes.array.isRequired,
        onSelectChange: PropTypes.func.isRequired,
        searchDisabled: PropTypes.bool.isRequired,
        picks: PropTypes.array.isRequired,
        stock_edit_to_show: PropTypes.number
    }

    /**
     * Component Bridge Function
     * @param stock_id stocks id in the database
     */
    stockSearchChange = (stock_id) => {
        this.props.onSelectChange(stock_id);
    }

     //this is my current attempt to at least 
     //disable options on component mount but this doesn't seem to be working
    componentWillMount = () => {
        console.log('picks!: ' + JSON.stringify(this.props.picks));
        let pickIDs = this.props.picks.map((p) => p.stock_id);
        options = options.map((o) => {
            // console.log(pickIDs.indexOf(o.value));
            if(pickIDs.indexOf(o.value)) {
                // console.log('here is the option: ' + JSON.stringify(o));
                // console.log('here is the option: ' + o.disabled);
                o.disabled = true;
            }
        })

    }

    /**
     * handles selected option from the stock select
     * @param selectedOption
     */
    handleSelect = (selectedOption) => {
        this.stockSearchChange(selectedOption.value);
    }

    render() {
        return (
            <div className="stock-search-container">
                <Select
                    name="stock-search"
                    options={options}
                    placeholder="Type or select a stock here..."
                    onChange={this.handleSelect}
                    disabled={this.props.searchDisabled}
                    value={this.props.stock_edit_to_show}
                    filterOptions={filterOptions}
                />
            </div>
        )
    }
}

export default StockSearch;

I have tried filtering through the picks props and changing that options variable to include disabled:true but this lags the application and I'm not sure if that will work now that I'm using react-select-fast-filter-options as it seems to be doing some sort of indexing. Is there a way to filter through the options var to find all instances of the picks prop and disable those options quickly?


isDisabled={this.props.disabled}

You are passing a wrong prop.. For v2, the prop is isDisabled.

https://github.com/JedWatson/react-select/issues/145

support for disabled options · Issue #145 · JedWatson/react-select , Is there anyway to pass a disabled attribute to an option? exports.US = [ { value: '​AL', label: 'Alabama', disabled: true }, { value: 'AK', label:  In react-select v2: 1) add to your array of options a property 'disabled': 'yes' (or any other pair to identify disabled options) 2) use isOptionDisabled props of react-select component to filter options based on 'disabled' property. Here's an example:


In react-select v2:

1) add to your array of options a property 'disabled': 'yes' (or any other pair to identify disabled options)

2) use isOptionDisabled props of react-select component to filter options based on 'disabled' property

Here's an example:

import Select from 'react-select';

const options = [
{label: "one", value: 1, disabled: 'yes'},
{label: "two", value: 2]

render() {

 <Select id={'dropdown'}
         options={options}
         isOptionDisabled={(option) => option.disabled === 'yes'}>
 </Select>

}

More information about react-select props is in the docs and here's an example they reference.

How to make handle action for disable option in react-select? · Issue , I want to make custom event and dispatch him, when user click on disabled option in react-select dropdown. But any events dont work in this  JedWatson / react-select. Watch 232 Star 19.2k Fork 3.5k Code. Issues 1,279. Pull requests 101. Actions support for disabled options #145. Closed


use the following to disable an option.

import Select from 'react-select';

render() {
  const options = [
    {label: "a", value: "a", disabled: true},
    {label: "b", value: "b"}
  ];

  return (
    <Select
      name="myselect"
      options={options}
    </Select>
  )
}

React-Select Example, A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support. I don't like Chocolate (disabled the option) Stay open  A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support. React Select A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.


How to disable an option in react-select, How to disable an option in react-select, react-select disabled not working, dropdown default disabled option, example to disable autocomplete  A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.


React Select - CodingTown, Disabling the Select. To disable the react select if the options contain more than 20 data then we can use the following logic const options = [ {  options - specify the options the user can select from; placeholder - change the text displayed when no option is selected; noOptionsMessage - ({ inputValue: string }) => string | null - Text to display when there are no options; value - control the current value; See the props documentation for complete documentation on the props react-select supports.


react-select, Need private packages and team management tools?Check out npm Teams ». react-select. 3.1.0 • Public • Published 2 months ago. Readme · ExploreBETA · 8​  When present, it specifies that an option should be disabled. A disabled option is unusable and un-clickable. The disabled attribute can be set to keep a user from selecting the option until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript is required to remove the disabled value, and make the option selectable.