Multiselect questions

[Sam]

Hi,

On the multiselect component is there a way to add a custom value the same way you do by pressing enter by pressing tab? Failing that, is there a way to clear the input on blur?

Here is the code I have

 

<MultiSelect
  data={filteredTitles}
  textField="text"
  onFilterChange={onFilterChange}
  filterable={true}
  onChange={(e) => setTitles(e.target.value)}
  tagRender={tagRender}
  allowCustom={true}
  placeholder="e.g. test..."
  popupSettings={{ height: 500 }}
  autoClose={false}
  listNoDataRender={() => <div></div>}
/>

 

Thanks

[Stefan]

Hello, Sam,

Regarding both questions:

1) Entering new value on tab - This can be done by using the component ref to add a key down event to the MultiSelect input element. Then on that event to check for the tab key and add the current value to the list.

2) Clear value on tab -If the text has to be cleared when the MultiSelect losses focus I can suggest utilizing the onBlur event of the MultiSelect:

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/MultiSelectProps/#toc-onblur

For example, the internal state of the component can be changed to set the text to an empty string:

onBlur={(e) => e.target.setState({
  text: ''
 })}

I made an example combining both questions:

https://stackblitz.com/edit/react-hqs9dm?file=app/main.jsx

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Sam]

Hi, thanks for the update.

I'm actually using Hooks instead of Class components so I've translating it over into that but I'm having a problem in the handleTabKey event. As I don't have setState and am using useState for this, it's clearing all the jobTitle data when I press tab.

https://stackblitz.com/edit/react-hqs9dm-hzmrj2?file=app/main.jsx

Hopefully you can help me with this.

Also do you know a way to stop the select from opening when you click, and only show when you've entered at least 1 character? I've tried it using opened but I can't get it to close again.

 

Thanks

 

[Stefan]

Hello, Sam,

Thank you for the updated example.

The issue with jobTitles is because we pass MyMultiSelect as a parameter to the useEffect hook. This will memorize the function and it will call handleTabKey always with the same initial value of jobTitles. This is why we can resolve it by passing jobTitles as parameters, to ensure that the values will be updated when we update jobTitles.

This is the updated example:

https://stackblitz.com/edit/react-hqs9dm-cw46r1?file=app/main.jsx

As for the additional question, this can be achieved using the opened prop indeed. Then we can bind its value to the state using useState, and close it on the onClose and onBlur events of the MultiSlect by setting the state value to false:

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/MultiSelectProps/#toc-onblur

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/MultiSelectProps/#toc-onclose

Regards,
Stefan
Progress Telerik