Hello, can you please update the license on npm. I can see that it is available on github, but is not recognized/updated at npm (https://www.npmjs.com/package/rc-dropdown).

Probably it is just updating package.json -> licenses to license

Dear rc-dropdown maintainers,
Thank you for your contribution to the open-source community.

This issue was automatically created to inform you a new npm maintainer has published version 3.2.1 of rc-dropdown.

New Maintainers:

• madccc

Our service monitors the open-source ecosystem and informs popular packages' owners in case of potentially harmful activity.
If you find this behavior legitimate, kindly close and ignore this issue. Read more

https://github.com/react-component/dropdown/blob/a318fc5ed7e716ca24a9ea053a8ae309e96d4f8a/src/Dropdown.tsx#L28...L44

And we can use api named getPopupContainer in our system

Interface is not exporting from index.ts

Since version 6 of rc-menu the dropdown with a SubMenu is broken.

Used packages have new releases which fix a lot of bugs. Should react-component/dropdown have a release too?

For example, the /trigger package

This is /dropdown latest release 7 months ago:

Please, remove the console.log from useAccessibility.js

Reproducible link: https://codesandbox.io/s/zq3m99317m

Steps to reproduce
Pass visible equal to true to Dropdown

What is expected?
Overlay should have same width to the button which is the case if it is not visible by default.

What is actually happening?
Overlay menu is initialized to minimum width.

Root issue: ant-design/ant-design#13128

version: 1.4.8
node: v10.13.0
npm: 6.4.1

1.4.8 在 IE8下会出现向上偏移的情况

IE8 向上偏移

IE9 正常

What the title says

Downloaded the package using npm.
I can see that there are type definitions supplied with the package on git, but they're missing in the node_modules dir

Am I missing something?

Hi, I see there are some ARIA attributes in place for menus. However, the dropdown can't be navigated with the keyboard, and the trigger button is not associated with the menu.

First, the button needs to be bound to the menu–this can be done with aria-controls="theMenuID", aria-haspopup="true", and aria-expanded="true | false".

When the dropdown opens, focus should be sent to the first item (which needs tabindex="0") instead of the unordered list which has tabindex. Using the roving tabindex technique, only one item can be tabbable at a time when the menu is open. You've already got aria-activedescendant working, so the tabindex and focus management portions will get you part of the way there!

Hooking up the escape key to close the menu would be a nice addition, too.

onVisibleChange is not fired when menu item is selected
这个问题在现在的最新版中仍然存在
https://codesandbox.io/s/jiben-antd492-forked-jldb1?fontsize=14&hidenavigation=1&theme=dark

The current builtinPlacements are fixed. Those are nice preset, but I trying to remove the 4px spacing to have a seamless contact between the trigger and the dropdown.

edit: this can be solves with css.

如果不设置，菜单宽度按以下原则计算：

1. 取触发元素的宽度
2. 取菜单文字的最大宽度
3. 取两者的大值

这样如何？

Hi
Is there any way how to easily close overlay by clicking on button inside of overlay
Thanks

Passing placement prop doesn't change the class name.
Its always the default bottomRight

"dependencies": { "rc-dropdown": "^2.4.1" }

<Dropdown overlay={menu} placement="topRight"> <button> Actions </button> </Dropdown>

目前的逻辑，overlay 的宽度必须大于等于 root，有些 dropdown 的宽度，在实际场景中需要小于 root，是否可以提供配置，关闭这个操作？

file1

  import Button from 'rc-button';
  const overlay = () => {
   return (
    <Button onClick={props.onHandle}> close </Button>
   )
 }
export default overlay

file2

 import Dropdown from 'rc-dropdown';
import Overlay from './overlay'
  const drop = () => {
  const  [visible, setVisible] = useState(false)
    return (
      <Dropdown
        overlay={<OverLay onHandle={setVisible(false}} />}
        visible={visible}
      >
        <Button> show </Button>
      </Dropdown>
    )
  }
export default drop

when click button close , but the Button class still have rc-dropdown-open

Bug report

Affected: [email protected]
See: https://codesandbox.io/s/rc-dropdown-v4-0-1-overlay-click-visible-false-bug-ppo3hl-ppo3hl?file=/src/App.tsx

Steps to reproduce

1. Click on "open" button
2. Click on appeared "disabled" menu item

Current behavior

Dropdown closes

Expected behavior

Dropdown not closes

Additional

When using [email protected] there is no problem

project: https://github.com/orgs/react-component/projects/1/views/1

should be in dependencies.

face this error:

初始浏览器打开，下拉列表选择后，拖拽浏览器，使其改变小。
下拉列表的内容不随浏览器的变小而变小。
但它随着浏览器的变大而变大！

<Dropdown overlay={menu4} trigger="click">
          <button className="btn btn-info btn-sm">
            点击触发 <i className="glyph-icon glyph-arrow-down"></i>
          </button>
        </Dropdown>

it throw error, Uncaught TypeError: this.popupInstance.getPopupDomNode is not a function
Note: first click trigger button, it works fine. click trigger button repeat twice +, it will throw error.

Hi, When I pass dropdown visible state to overlay and set the trigger to hover, the overlay prop is not update correctly.
Demo

// You should fork and save if you had updated this CodePend and want to send it to others.
// Note: antd.locales are only support by `dist/antd`
const { Dropdown } = antd;

class Div extends React.Component {
  componentDidMount () {
    console.log('overlay mount', this.props.visible)  
  }
  
  componentDidUpdate () {
    console.log('overlay update', this.props.visible)  
  }
  
  render () {
    return <div className='overlay-container'>Overlay</div>
  }
}

class Test extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false
    }
    this.handleVisibleChange = this.handleVisibleChange.bind(this)
  }
  
  handleVisibleChange (visible) {
    console.log('visible change', visible)
    this.setState({ visible })
  }
  
  render () {
    return (
      <div>
        <Dropdown
          placement='bottomLeft'
          trigger={['click']}
          onVisibleChange={this.handleVisibleChange}
          overlay={<Div visible={this.state.visible} />}
        >
          <span className='trigger-text'>Click Text</span>
        </Dropdown>
        <Dropdown
          placement='bottomRight'
          trigger={['hover']}
          mouseEnterDelay={0}
          onVisibleChange={this.handleVisibleChange}
          overlay={<Div visible={this.state.visible} />}
        >
          <span>Hover Text</span>
        </Dropdown>
      </div>
      
    )
  }
}

ReactDOM.render(
  <Test />
, mountNode);

When the mouse leave the Trigger, the output of the console is like this:

overlay is updated before the visible has changed, and the value is true not false

And it also related to the mouseEnterDelay prop. When mouseEnterDelay is not set to 0 (0 is the default prop value of rc-trigger), the result is different:

overlay is updated before the visible has changed too, but when the next enter event trigger, the overlay prop updated twice.

If the trigger is set to 'click'，everything works fine:

Is there any way to controll this dropdown by keyboard control?

For example, press enter to trigger dropdown and press arrow up or arrow down to change focused item.

Thanks

I am using the latest 1.4.10 version of the dropdown.

I would like the dropdown to hide when the user moves the mouse off the menu or if the user clicks outside of the menu. Setting hideAction to 'mouseLeave' seemed to be the way to accomplish this.

Setting hideAction results in the menu hiding when the user moves from the trigger button to the menu.

Is there another prop that I should be using?

To see the behavior, modify the examples/simple.js in the repo
~ add hideAction prop to the Dropdown as in below.

ReactDOM.render(<div style={{ margin: 20 }}>

I have to add/remove menu item based on some conditions so how can I achieve it ??

When I toggle the dropdown directly it fires correctly. Even when I click outside of the menu it works. But when I select a MenuItem it doesn't fire the onVisibleChange event callback.

getPopupContainer = () => document.documentElement let dom-align crash (Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.)
should add some protect?

lib/index.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _Dropdown = require('./Dropdown');

var _Dropdown2 = _interopRequireDefault(_Dropdown);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default = _Dropdown2.default;
module.exports = exports['default'];

1.4.6 hasn't this problem.

I do not want to hide the dropdown menu content when clicked, Please consider this demo: https://codesandbox.io/s/exciting-grass-440zv?file=/src/App.js. When you click the button, the menu appears but when you click inside the red menu, The dropdown closes. Is there any option to prevent the menu close on the overlay click?

https://github.com/react-component/dropdown/blob/master/src/Dropdown.tsx#L95

expect:
remove unnecessary console.log and add an eslint rule

Once selected/clicked menu item is always selected even after the dropdown is closed.
Can we please a have prop to reset the previously selected menu item once the dropdown is closed.

Can be able to repro in any of the sample pasting one below for reference.
Example http://react-component.github.io/dropdown/examples/dropdown-menu-width.html

Hey,

is there an easy prop that triggered with clicking outside the dropdown ?

Thanks

Hi,
It seems that you have a dependency on https://github.com/react-component/trigger, and the following commit breaks the dropdown (namely prevents it from opening, the div with the dropdown gets position 'absolute' and style.top/left of '-9999px'.
react-component/trigger@6ea92c7

At the same time the requirement for rc-trigger dependency is "1.x", which causes npm to install the latest (broken) version 1.8.2.
I suggest updating rc-trigger dependency to "1.8.1", as this was the last working version and fixing the rc-trigger.
Should I create a pull request?
Thanks! :)

What's the point of not attaching rc-menu to dependencies?

在Trigger的宽度大于overlay的宽度的情形下，当minOverlayWidthMatchTrigger为true时（rc-dropdown的默认值）且 placement 不是靠左的时候，第一次显示dropdown的位置会偏移。（再显示一次就会正常了）

例子：
https://codepen.io/anon/pen/aymyVB?editors=001

我找到的可能的原因是dropdown是先按照原始宽度做的align，然后再根据Trigger的宽度去改变dropdown的宽度，但dropdown本身却没有重新align：
https://github.com/react-component/dropdown/blob/master/src/Dropdown.jsx#L104

1. 第一次显示
   

2. 宽度调整
   

3. 最终显示
   

I write a example contrast to the official example, but got this layout

like select

The current suggested implementation requires the Menu component to notify the Dropdown component when someone clicks on the menu via a higher-level wrapper component. This results in a lot of boilerplate just for the Dropdown to react to Menu.Item clicks. Once you pass the Menu in the Dropdown's overlay prop, the Dropdown should be self-sufficient. Really, once the Menu is passed to the Dropdown as its overlay prop, the Dropdown should be directly aware of clicks on its own overlay.

I suggest the simple addition of Dropdown.props.onOverlayClick, a function which gets fired whenever the overlay is actually clicked. I've submitted a pull request for it here: #20.

A future enhancement could be to pass data on exactly which Menu.Item was clicked, allowing the Dropdown to make smart decisions on how to respond to the event.

I think this package doesn't usage any new lifecycle api (getDerivedStateFromProps, getSnapshotBeforeUpdate)? So react-lifecycles-compat may be unnecessary. Besides, there still has some problem when using react-lifecycles-compat: reactjs/react-lifecycles-compat#13

Hello, here's how im using the Dropdown from antd:

const [menuVisible, setMenuVisible] = useState(false);

const onInputFocus = useCallback(() => setMenuVisible(true), []);
const onInputBlur = useCallback(() => setMenuVisible(false), []);

<Dropdown overlay={OptionMenu} visible={menuVisible}>
  <Input
    className={styles.input}
    onFocus={onInputFocus}
    onBlur={onInputBlur}
  />
</Dropdown>

And I can confirm that every time the Dropdown opens, the onBlur on Input is triggered.

The issue is introduced in version @3.2.3, and I reverted back to use version @3.2.2 and the issue is fixed.

Wrapped my application in React.StrictMode and got

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: Trigger

Hi, I currently want to use forceRender prop from rc-trigger in my dropdown. However, when I add the props to my current dropdown, typescript will cause errors because forceRender is not a prop of the dropdown component.

In the typescript, I just wonder why do we only Pick 'getPopupContainer' | 'children' from TriggerProps ?

Can't resolve 'rc-dropdown/assets/index.css'

https://github.com/react-component/dropdown/blob/master/src/Dropdown.jsx#L110

trigger may return null at the first overlay render.