Multi-select spacebar mutiple selection

4 posts, 1 answers
  1. Richard
    Richard avatar
    11 posts
    Member since:
    Mar 2017

    Posted 16 Nov Link to this post

    Our accessibility department flagged our kendo multiselects as being "inaccessible" because "spacebar" is not supported to use as a selector. Multiselect apparently uses "Enter" key to make multiple selections.

    I have tried to swap the keycodes during detection but it doesnt seem to work.

    Ultimately, we would like to support "spaces" in our input field, but use the spacebar key to make a selection when scrolling through the list.

     

    I have tried this code but it doesnt work. Any ideas? Is this possible?

     

    //watch for "spacebar" key sequence from user keyboard
    multiselectRoot.on("keydown", function (e) {
     
        if (e.keyCode === 32) { // space bar
            console.log('found spacebar');
     
            event.preventDefault();
            e.keyCode = 13; //reset to "return key"
            multiselect.trigger(e);
     
            console.log('event fired');
        }
    });

     

    Thank you

  2. Richard
    Richard avatar
    11 posts
    Member since:
    Mar 2017

    Posted 16 Nov Link to this post

    sorry, it should be

     

    e.preventDefault();

  3. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1332 posts

    Posted 17 Nov Link to this post

    Hello Richard,

    I replied in the support ticket with the same subject you opened, so I'll paste my reply here as well. If you have additional questions on this matter I would suggest we continue the discussion in the support thread in order to avoid thread duplication. 

    While selecting an item when Spacebar is pressed can be implemented (see the following dojo for example) this would prevent the user from entering empty spaces in the MultiSelect's input. As you can see when you open the MutliSelect's dropdown the mouse cursor is within the MutliSelect's input and the user can filter the items by entering text. So the expected behavior is the user to be able to enter empty spaces by pressing the Spacebar. At the same time you want to be able to select an item by pressing that key, however the widget cannot tell which of these two actions should be executed at any given time (whether you want to enter an empty space or you want to select an item). Therefore both functionalities cannot be used at the same time if they are triggered by the same key, which is why by design Enter is used for items selection.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Richard
    Richard avatar
    11 posts
    Member since:
    Mar 2017

    Posted 17 Nov Link to this post

    Thank you Ivan! Your dojo helped me find the solution. I had to make some changes for it to work for me, but it works excellent now!

    Here is the code I ended up using (for anyone interested):

     

         var multiselectRoot = rootEl.find(".k-widget.k-multiselect");
     
        //Multi-Region - Key down event
        multiselectRoot.on("keydown", function (e) {
            //watch for "spacebar" key sequence from user keyboard
            if (e.keyCode === 32) { // spacebar event
                if ($("#multiSelector").css("display") === "none") {
                    event.preventDefault(); //stop normal execution
                    $(".k-state-focused").click(); //force a click on the focus item
                }
            }
        });

     

    Thank you for your help. I hope this will pass our accessibility audit now.

Back to Top