Make filter in multiselect look like filter in dropdownlist

[Lee]

I have been asked to make the filter input (search box) appear at the top of the dropdown list in a multiselect exactly like it does in the dropdownlist component. Is there a way to move the filter input out of the box at the top and into the search area? The expected behavior is this:

1. User clicks on the dropdownlist (or the down arrow)
2. The list opens displaying a search (filter) input at the top just like the dropdownlist does.
3. User types in the filter and the list filters the results.
4. User clicks on one of the items and it adds a chip above.

[Georgi Denchev]

Hello, Lee,

You can use the header template to render an input in the header of the multiselect component. The logic itself is a bit tricky as the MultiSelect is not designed to have a searchbox inside its popup by default.

I've created a Dojo for you to examine, however keep in mind that this solution does not take WAI-ARIA into consideration so there could be accessibility problems.

Dojo

https://dojo.telerik.com/@gdenchev/ahocAlep 

Best Regards,
Georgi Denchev
Progress Telerik

[Lee]

Thanks but this is a bit buggy. Sometimes it won't let me type in the input or select the text with the mouse. It also still has the input in the dropdown control above and if the user types there accidentally then the search below gets disabled. It seems if the new input loses focus, it can't regain it. 

[Georgi Denchev]

Hi, Lee,

The list(dropdown/popup portion) excludes certain elements from obtaining focus/being interactable. That is also why the custom logic with the `element.focus` is required in order for the user to be able to type in the input inside the popup.

You could try to add the 'focus' logic to a `click` handler on the input.

      $(document.body).on("click", "[role='searchbox']", (e) => {
        let search = $("[role='searchbox']");
        ms.one("close", (ev) => {
          ev.preventDefault();
        });
        kendo.focusElement(search);
      });

As for the regular input, if you don't want the user to be able to type in it, you can set it to readonly.

      let ms = $("#multiselect").data("kendoMultiSelect");
      ms.input.attr("readonly", "true");

Dojo

https://dojo.telerik.com/@gdenchev/ediyiPaZ 

Best Regards,

Georgi

[Lee]

While this is certainly a step in the right direction, I still have an issue when trying to highlight the text typed into the search box and when I click in the top box and back into the search box, the whole list is shown again. For example, type "or" in the search box, click the area above it where the selected item would be displayed, click back in the search box. Observe that "Apple" and "Orange" now displays, even though "or" is still in the search box. 

[Georgi Denchev]

Hi, Lee,

The filter input is not something that is available in the multiselect as the widget's input itself is meant to serve that purpose. That is why there will likely be corner cases with the custom implementation.

I've made some slight modifications, however there's no guarantee everything will work out of the box. You can either extend the logic or my personal recommendation would be to simply stick to the built-in functionality.

// Changes are highlighted in yellow

        ms._typingTimeout = setTimeout(function() {
          var value = $(e.target).val();
          if (ms._prev !== value) {
            ms._prev = value;
            ms.search(value);
            ms._toggleCloseVisibility();
          } else if (value === "") {
            ms.search(value);
            ms._toggleCloseVisibility();
          }

// Changes are highlighted in yellow
$("#multiselect").kendoMultiSelect({
        dataSource: [
          { id: 1, name: "Apples" },
          { id: 2, name: "Oranges" }
        ],
        filtering: function(e) {
          if(event && $(event.target).is(e.sender.input)) {
            e.preventDefault();
          }
        },

Dojo

https://dojo.telerik.com/@gdenchev/OJebIyeJ 

[Lee]

Unfortunately, the client doesn't like the built in functionality, and quite frankly, I agree with them. The user should not be able to type in the input, instead it should function the same way as the dropdown list with the search being in the list like the dropdownlist is. 

[Georgi Denchev]

Hi, Lee,

The MultiSelect is designed to work this way and there is no way to to change it to that extent, or at least no built-in settings to do so.

On the other hand, I would recommend that you open a FR in our feedback portal with your idea. This sounds either like a brand new widget or some other "mode" of the MultiSelect, however this is not up to me to decide. If the request garners enough interest, the managers will review it.

Best Regards,

Georgi

[Lee]

Done. Here is a link to the feature request: 
https://feedback.telerik.com/kendo-jquery-ui/1649561-make-search-in-multiselect-look-like-search-in-dropdown-list

[Georgi Denchev]

Hi, Lee,

Thank you for submitting the FR!

I've approved it and moved it to unplanned.

Best Regards,

Georgi