Multiselect questions

4 posts, 0 answers
  1. Sam
    Sam avatar
    10 posts
    Member since:
    Dec 2017

    Posted 21 Aug 2020 Link to this post

    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


  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 24 Aug 2020 Link to this post

    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).

  3. Sam
    Sam avatar
    10 posts
    Member since:
    Dec 2017

    Posted 24 Aug 2020 in reply to Stefan Link to this post

    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

     

  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 25 Aug 2020 Link to this post

    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/.

Back to Top