How can I monitor the change of the dropdown position?

[Nurik]

When I use dropdown and style border of popup, border top of popup is transparent and dropdown's bottom border transparent too. How can i change border of dropdown and popyp when popup change his position from bottom to top and opposite when I scroll content. Can I monitor change of popup of dropdown?

[Yanko]

Hi, Nurik,

Yes, you can monitor the change of the popup position through the `onPosition` event. To implement the popup borders as described you can use the `onPosition` property of the `popupSettings` to determine whether the displayed border should be on the bottom or the top. The `onPosition` event has a property `flipped` that can be stored in a state and determine the border:

const [popupBorder, setPopupBorder] = React.useState();
  const handlePosition = (e) => {
    e.flipped ? setPopupBorder('Top') : setPopupBorder('Bottom');
  };
...
<DropDownList
   ...
    popupSettings={{
       onPosition: handlePosition,
       style: {
         borderLeft: 'solid 1px red',
         borderRight: 'solid 1px red',
         [`border${popupBorder}`]: 'solid 1px red',
          width: '300px',
       },
}}

I prepared an example that showcases the above approach:

• https://stackblitz.com/edit/react-5a1gkx?file=app%2Fapp.tsx 

Regards,
Yanko
Progress Telerik

[Nurik]

Thank you, I fix my problem wtih your example.

[Yanko]

I am glad to hear my example helped you in resolving the matter.