This is a migrated thread and some comments may be shown as answers.

Multiselect questions

3 Answers 36 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Veteran
Sam asked on 21 Aug 2020, 05:09 PM

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


3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 24 Aug 2020, 09:52 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Sam
Top achievements
Rank 1
Veteran
answered on 24 Aug 2020, 02:14 PM

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

 

0
Stefan
Telerik team
answered on 25 Aug 2020, 11:43 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Sam
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Sam
Top achievements
Rank 1
Veteran
Share this question
or