Dropdown "judders" if it can't figure out where to determine placement

[mellis481]

Reproduction link

https://codesandbox.io/p/sandbox/8334zm

Steps to reproduce

1. Open reproduction in new window (https://8334zm.csb.app/).
2. Open dropdown in Actions column.

What is expected?

The action menu to correctly determine where to open based on available space.

What is actually happening?

It endlessly "judders", causing a horrible user experience.

Additional information

This reproduction users a specific column width to easily replicate the issue, but I have seen this issue numerous other locations outside of a table.

Environment	Info
antd	5.22.3
React	Latest
System	Windows
Browser	All

---

This seems to be caused by an rc-trigger change.

react-component/trigger#496
react-component/trigger#419

ref: UIEN-6867

[petercat-assistant]

It seems like you're experiencing an issue with the dropdown menu in Ant Design where it "judders" due to placement determination problems. This issue might be linked to changes in the rc-trigger component, as you've noted.

To address this, you can try the following steps:

1. Check for Updates: Ensure that you are using the latest version of both Ant Design and rc-trigger. Sometimes, issues like these are resolved in newer releases.

2. Placement Configuration: If the issue persists, you might want to manually set the placement of the dropdown to a fixed position that suits your layout. This can sometimes mitigate the problem by avoiding the automatic placement logic that might be causing the "juddering".

3. Custom Trigger Logic: If the above steps don't resolve the issue, consider implementing custom logic to handle dropdown placement. This might involve calculating available space and setting the dropdown position programmatically.

4. Community and Support: Since this issue seems to be linked to a specific change in rc-trigger, it might be helpful to follow the discussions in the linked GitHub issues and pull requests. Engaging with the community or maintainers might provide additional insights or workarounds.

If none of these solutions work, it might be a good idea to keep an eye on the linked GitHub issues for any updates or fixes from the maintainers.

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[mellis481]

OK, let's see how good this AI bot is...

@petercat-assistant With regard to your "custom trigger logic" suggestion, how can the dropdown position/placement be set programmatically? I'm not seeing a way to override that here: https://ant.design/components/dropdown#dropdown

[petercat-assistant]

To set the dropdown position or placement programmatically in Ant Design, you can use the getPopupContainer and placement properties provided by the Dropdown component. Here's how you can approach it:

1. Placement Property: The placement property allows you to specify the preferred position of the dropdown. You can set it to values like bottomLeft, bottomRight, topLeft, topRight, etc., depending on your layout needs.

2. getPopupContainer Property: This property allows you to specify the container where the dropdown should be rendered. By default, it renders in the body, but you can customize it to render within a specific DOM element.

Here's an example of how you can use these properties:

import React from 'react';
import { Dropdown, Menu } from 'antd';

const menu = (
  <Menu>
    <Menu.Item key="1">Option 1</Menu.Item>
    <Menu.Item key="2">Option 2</Menu.Item>
    <Menu.Item key="3">Option 3</Menu.Item>
  </Menu>
);

const CustomDropdown = () => {
  return (
    <Dropdown
      overlay={menu}
      placement="bottomLeft" // Set your preferred placement
      getPopupContainer={triggerNode => triggerNode.parentNode} // Customize the container
    >
      <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
        Hover me
      </a>
    </Dropdown>
  );
};

export default CustomDropdown;

In this example, the dropdown is set to appear at the bottomLeft of the trigger element, and it will render within the trigger element's parent node. You can adjust these settings based on your specific requirements.

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[mellis481]

@petercat-assistant Yes, I know how to set the placement prop of the Dropdown component. I was asking about your "custom triggering logic" suggestion. How can custom trigger logic be set which, as you said, might involve calculating available space and setting the dropdown position programmatically?

[petercat-assistant]

To implement custom trigger logic for setting the dropdown position programmatically, you can use a combination of event handlers and state management to calculate available space and adjust the dropdown's position dynamically. Here's a general approach you can take:

1. Event Handlers: Use event handlers to detect when the dropdown is about to be shown. You can use the onVisibleChange event of the Dropdown component to trigger your custom logic.

2. Calculate Available Space: Use JavaScript to calculate the available space around the dropdown trigger element. You can use the getBoundingClientRect method to get the dimensions and position of the trigger element.

3. Set Position Programmatically: Based on the available space, decide the best position for the dropdown and set the placement property accordingly.

Here's a basic example to illustrate this approach:

import React, { useState } from 'react';
import { Dropdown, Menu } from 'antd';

const menu = (
  <Menu>
    <Menu.Item key="1">Option 1</Menu.Item>
    <Menu.Item key="2">Option 2</Menu.Item>
    <Menu.Item key="3">Option 3</Menu.Item>
  </Menu>
);

const CustomDropdown = () => {
  const [placement, setPlacement] = useState('bottomLeft');

  const handleVisibleChange = (visible) => {
    if (visible) {
      const triggerElement = document.querySelector('.ant-dropdown-link');
      const rect = triggerElement.getBoundingClientRect();
      const windowHeight = window.innerHeight;
      const windowWidth = window.innerWidth;

      // Calculate available space and set placement
      if (rect.bottom + 200 > windowHeight) {
        setPlacement('topLeft');
      } else if (rect.right + 200 > windowWidth) {
        setPlacement('bottomRight');
      } else {
        setPlacement('bottomLeft');
      }
    }
  };

  return (
    <Dropdown
      overlay={menu}
      placement={placement}
      onVisibleChange={handleVisibleChange}
    >
      <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
        Hover me
      </a>
    </Dropdown>
  );
};

export default CustomDropdown;

In this example, the handleVisibleChange function calculates the available space when the dropdown is about to be shown. It adjusts the placement based on whether there's enough space below or to the right of the trigger element.

You can expand this logic to include more complex calculations or additional placements based on your specific layout requirements.

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[petercat-assistant]

To implement custom trigger logic for setting the dropdown position programmatically, you can use a combination of JavaScript to calculate the available space and dynamically adjust the dropdown's position. Here's a general approach you can take:

1. Calculate Available Space: Use JavaScript to determine the available space around the dropdown trigger element. This can be done by measuring the dimensions of the viewport and the trigger element.

2. Determine Optimal Position: Based on the available space, decide the best position for the dropdown. You might need to switch between different placements like bottomLeft, bottomRight, topLeft, topRight, etc.

3. Set Placement Dynamically: Use state management to dynamically set the placement property of the Dropdown component based on your calculations.

Here's a basic example of how you might implement this logic:

import React, { useState, useRef, useEffect } from 'react';
import { Dropdown, Menu } from 'antd';

const menu = (
  <Menu>
    <Menu.Item key="1">Option 1</Menu.Item>
    <Menu.Item key="2">Option 2</Menu.Item>
    <Menu.Item key="3">Option 3</Menu.Item>
  </Menu>
);

const CustomDropdown = () => {
  const [placement, setPlacement] = useState('bottomLeft');
  const triggerRef = useRef(null);

  useEffect(() => {
    const calculatePlacement = () => {
      if (triggerRef.current) {
        const rect = triggerRef.current.getBoundingClientRect();
        const viewportHeight = window.innerHeight;
        const viewportWidth = window.innerWidth;

        // Example logic to determine placement
        if (rect.bottom + 200 > viewportHeight) {
          setPlacement('topLeft');
        } else if (rect.right + 200 > viewportWidth) {
          setPlacement('bottomRight');
        } else {
          setPlacement('bottomLeft');
        }
      }
    };

    calculatePlacement();
    window.addEventListener('resize', calculatePlacement);

    return () => {
      window.removeEventListener('resize', calculatePlacement);
    };
  }, []);

  return (
    <Dropdown
      overlay={menu}
      placement={placement}
      getPopupContainer={triggerNode => triggerNode.parentNode}
    >
      <a ref={triggerRef} className="ant-dropdown-link" onClick={e => e.preventDefault()}>
        Hover me
      </a>
    </Dropdown>
  );
};

export default CustomDropdown;

In this example, the calculatePlacement function determines the best placement for the dropdown based on the available space. It sets the placement dynamically using the setPlacement function. This logic runs initially and whenever the window is resized.

You can refine the logic to better suit your specific layout and requirements.

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[mellis481]

@afc163 @MadCcc @zombieJ I'm finding this to be a pretty egregious visual issue which has been around for a long time. Please advise.

[zhaohuaxuan]

The easiest way to do this is to change the width of the Actions { title: "Actions",width: "120px"}, or move the position of the Actions around, guessing it's due to the columns not being wide enough.This doesn't look like a bug.

[mellis481]

@zhaohuaxuan Are you saying that, if you have a column with a dropdown, you need to set a static width to the column that is greater than the width of the dropdown contents? If so, I'd say that's either a bug or bad DX.

That said, this issue occurs if you portal the dropdown to another element which, to me, nullifies your assertion.

[mellis481]

@afc163 @MadCcc @zombieJ I'm finding this to be a pretty egregious visual issue which has been around for a long time. Please advise.

[jon-cullison]

@afc163 @MadCcc @thinkasany @zombieJ

I fixed the underlying cause of this issue in rc-trigger: react-component/trigger#510