How to clear selected options from react select?

106 Views Asked by At

I have implemented react select in my SPFx react project.

Below is the reference link for the react select control,

https://react-select.com/home

Below is the code snippet of the react select control.

                      <Select options={
                        (searchValue === null || searchValue) ?
                          filteredData?.map((item) => {
                            return {
                              value: item?.EncodedAbsUrl,
                              label: <a href={item?.EncodedAbsUrl} data-interception="off" target="_blank" rel="noopener noreferrer" className='link-name '>
                                {item?.FileLeafRef.split('.')[0]}
                              </a>
                            };
                          }) : []}
                        isMulti
                        className="ddl-search"
                        isClearable={true}
                        isSearchable={true}
                        placeholder={<><i className="fa fa-search"></i><span className='padding-left'>Search Forms & Templates</span></>}
                        onInputChange={(e) => filterDocuments(e)}
                        components={{ NoOptionsMessage }}
                        menuIsOpen={isOpenMenu}
                        onBlur={() => setIsOpenMenu(false)}
                        escapeClearsValue={true}
                        backspaceRemovesValue={true}
                        ref={ref}
                        openMenuOnFocus
                      />

I need to remove all selected options programmatically without pressing any key or clicking a button.

Below is the screenshot for the same for more clarification. enter image description here

Can anyone help me with the same?

Thanks

0

There are 0 best solutions below