Make filter in multiselect look like filter in dropdownlist

1 Answer 246 Views
MultiSelect
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 05 May 2023, 05:14 PM

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.

1 Answer, 1 is accepted

Sort by
1
Georgi Denchev
Telerik team
answered on 10 May 2023, 10:50 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 10 May 2023, 02:17 PM | edited

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
Telerik team
commented on 15 May 2023, 09:57 AM

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
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 11 Apr 2024, 07:52 PM

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
Telerik team
commented on 16 Apr 2024, 03:11 PM | edited

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
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 16 Apr 2024, 03:59 PM

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
Telerik team
commented on 19 Apr 2024, 02:46 PM

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
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 22 Apr 2024, 02:54 PM

Georgi Denchev
Telerik team
commented on 25 Apr 2024, 11:18 AM

Hi, Lee,

Thank you for submitting the FR!

I've approved it and moved it to unplanned.

Best Regards,

Georgi

Tags
MultiSelect
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Answers by
Georgi Denchev
Telerik team
Share this question
or