option is not defined

[abdulwahhabkhan]

Options:

[
                            {name: 'Swedish', value: 'sv'},
                            {name: 'English', value: 'en'},
                            {name: 'Urdu', value: 'ur'},
                            {name: 'Hindi', value: 'hi'},
                        ]

Value: 'fr'

Code:

<SelectSearch
                options={options}
                value={value}
                multiple={multiple}
                search={true}
                onChange={onChange}
                placeholder={placeholder}
                printOptions="on-focus"
                renderOption={renderOption}
                renderValue={(valueProps, snapshot, className)=>{

                    const values =  Array.isArray(snapshot.value) ? snapshot.value : [snapshot.value]

                   return (
                        <div>
                            <ul className="filter-items-select">
                                { values.map((option)=>{
                                    value = "";

                                    return option && (
                                        <li key={option._id}>
                                            <button className="filter-items-item"
                                                    type={"button"} value={option.value}
                                                    onClick={(event)=> removeOption(event) }
                                            >
                                                <div className="filter-items-item-text">
                                                    <img src="/noPhoto2.png" alt="sample-img" className="auto-complete-item-image"/>
                                                    <span className="auto-complete-item-title">
                                                        {  option.name }
                                                    </span>
                                                </div>
                                                <div className="filter-items-item-remove" >
                                                    <span className="filter-items-item-clear">
                                                        X
                                                    </span>
                                                </div>
                                            </button>
                                        </li>
                                    )
                                })}

                            </ul>
                            <input
                                {...valueProps}
                                onChange={(t)=>{
                                    valueProps.onChange(t);
                                    setState(t.target.value)
                                }}
                                onBlur={(e)=>{
                                    setState('')
                                    //valueProps.onBlur(e)
                                }}
                                value={state} className={'form-control form-control-sm'} />
                        </div>
                    )
                }}
            />

Scenario is:

Fr french was in the list of available options get saved in DB, but now do the change request this option is not available.

Any user who already have selected this option now getting the following error:

Load time error I was able to remove by adding a check for the option exists before return value.

But when I now try to choose any other option getting above error.

[manvydasu]

@abdulwahhabkhan Is this really a bug of library? What I understand, is that the value which you are setting on Select component no longer exists in the list options, yes?

So we should reproduce the issue like this:

    <SelectSearch
        value='xxl'
        id="test-id"
        options={[
          { value: 's', name: 'Small' },
          { value: 'm', name: 'Medium' },
          { value: 'l', name: 'Large' },
        ]}
        placeholder="Choose a size"
    />

I've tried this and didn't get any error.

[tbleckert]

@manvydasu Valid point. And I can't reproduce it either. Thanks for the help!

@abdulwahhabkhan Looking at the error, it seems that there is an option that is undefined in the options list.. If you have time, could you create a reproducible test case on codesandbox? I'll close this one for now, but will happily reopen it if you have any more info.