ant-design: Select props dropdownStyle set left/top failure

Environment

antd 2.11.2

Reproduction link

[https://codepen.io/paranoidjk/pen/LWpaKe(我暂时无法提供 Link to minimal reproduction选项的Url,因此挂载上了默认提供的一个Url))

Steps to reproduce

            <Select
              mode='multiple'
              notFoundContent={NOT_FOUNT_TEXT}
              dropdownMatchSelectWidth={false}
              onFocus={this.handleFocus.bind(this)}
              onSelect={this.handleSelect.bind(this)}
              onDeselect={this.handleDeslect.bind(this)}
              onSearch={this.handleSearch.bind(this)}
              getPopupContainer={() => document.getElementById('drop-down-area')}
              ***dropdownStyle={{ left: inputLeft, display: showDropDown ? '' : 'none' }}***
              dropdownClassName='my-drop-down'
            >
              {
                renderTags.map((d, i) => (<Option key={d.value}>{d.value}</Option>))
              }
            </Select>

What is expected?

I want to use dropdownStyle to control dropdown menu’s left/top i.e. its position params

What is actually happening?

The left/top params will be coverd by components params。 传入的style参数并不生效

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 22 (11 by maintainers)

Most upvoted comments

For anyone who is looking for the document, too: dependency chain: Select.dropdownAlign => rc-select.dropdownAlign => rc-trigger.popupAlign => dom-align.alignConfig

rc-select rc-trigger dom-align

Dropdown and Select are all based on rc-trigger, In Select, it’s called dropdownAlign.

https://codesandbox.io/s/ov56m6zk25

我试了dropdownAlign这个属性,但是还是不能解决我的问题。因为dropdownAlign={{offset: [x, y]}}中的x y 是相对于你计算出来的top left偏移的,由于你计算出来的top,left值是变化的 导致我无法确定偏移量x,y 要设为多少。 我的理解是 当我设置了dropdownStyle 后,当 dropdownStyle中有top,left属性的时候,你就不需要计算top,left值了,直接使用我dropdownStyle中设置的top,left值。现在是你用计算出来的top,left值 把我dropdownStyle中的top, left覆盖掉了。这显然是不合理的吧。

left is a special value in the dropdown, you can use getPopupContainer to render the dropdown to another container, then give that container a position you want.