MultiSelect Dropdown

[Dzmitry]

Hi! I work with React. I have Dialog with several fields. One of those field is MultiSelect. The problem is when I open MultiSelect's Dropdown adn scroll the Dialog's content and the Dropdown does not close when MultiSelect is not in the Dialog's viewport. I can get a nested element with a scroll  in a Dialog only through document.querySelector('.k-dialog-content') to close Dropdown manually. Is there a native solution for this kind of situation in kendo-react?

[Vessy]

Hello, Dzmitry,

The described behavior is expected as the onClose event of the DropDown is triggered when the element is blurred, while the scrolling of a parent element does not change the focus state of the component. Unfortunately, there is no way for us to listen to the onScroll events of all Dropdown parents, but you can use the MultiSelect in controlled mode and handle its open/close state manually when its parent is scrolled.

For convenience, I prepared a sample that demonstrates this approach so you can compare it with the solution that you have implemented already and choose the one that works better for your needs:

• https://stackblitz.com/edit/react-qsrxem-tg2x9z?file=app%2Fmain.jsx 

 

Regards,
Vessy
Progress Telerik

[Dzmitry]

Thanks a lot!

[Vessy]

You are welcome, Dzmitry :)

[David]

In React, you can achieve the desired behavior of automatically closing the MultiSelect dropdown when it goes out of the Dialog's viewport by utilizing the PopupSettings component. The PopupSettings component allows you to customize the behavior of the dropdown, including its positioning and visibility.

Here's an example of how you can use PopupSettings to close the MultiSelect dropdown when it is not in the viewport of the Dialog:

import React, { useRef } from 'react';
import { Dialog, MultiSelect } from '@progress/kendo-react-dropdowns';

const MyDialog = () => {
  const dialogContentRef = useRef(null);

  const handleScroll = () => {
    const dialogContentElement = dialogContentRef.current;

    if (dialogContentElement) {
      const dialogBounds = dialogContentElement.getBoundingClientRect();
      const dropdown = document.querySelector('.k-multiselect .k-dropdown');

      if (dropdown) {
        const dropdownBounds = dropdown.getBoundingClientRect();

        if (
          dropdownBounds.bottom < dialogBounds.top ||
          dropdownBounds.top > dialogBounds.bottom
        ) {
          dropdown.style.display = 'none';
        } else {
          dropdown.style.display = 'block';
        }
      }
    }
  };

  return (
    <Dialog onScroll={handleScroll}>
      <Dialog.Title>My Dialog</Dialog.Title>
      <Dialog.Content ref={dialogContentRef}>
        <MultiSelect
          data={['Option 1', 'Option 2', 'Option 3']}
          popupSettings={{
            animate: false,
            appendTo: dialogContentRef.current,
            onOpen: handleScroll,
            onClose: handleScroll,
          }}
        />
      </Dialog.Content>
    </Dialog>
  );
};

In this example, we are using the onScroll event of the Dialog component to check if the MultiSelect dropdown is outside the visible bounds of the Dialog's content. If it is, we hide the dropdown by setting its display property to "none" so that it closes automatically.

Note that we are also using the popupSettings prop of the MultiSelect component to control the behavior of the dropdown. We set the appendTo property to the ref of the Dialog's content so that the dropdown is appended to it and positioned correctly within the Dialog.

By combining these techniques, you can achieve the desired behavior of closing the MultiSelect dropdown when it goes out of the Dialog's viewport.