Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select expand scroll style weird in the affix #19951

Closed
1 task done
1123612483 opened this issue Nov 27, 2019 · 5 comments
Closed
1 task done

Select expand scroll style weird in the affix #19951

1123612483 opened this issue Nov 27, 2019 · 5 comments
Labels
3.x 3.x stable issue or bug fix, PR should be cherry-pick to master Inactive

Comments

@1123612483
Copy link

1123612483 commented Nov 27, 2019

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://muffinyu.github.io/antd-online/

Steps to reproduce

1.Click on the first select component.(选择第一个选择框)
2.Scrolling window.(滚动窗口)
3.Click on the second select component.(选择第二个选择框)
4.Scrolling window again.(再次滚动窗口)

What is expected?

Expanded style is normal or expand box hidden when scrolling.(展开的样式是正常的或者滚动时隐藏展开框)

What is actually happening?

Expanded style is weird.(展开的样式是怪异的)

Environment Info
antd 3.25.3
React 16.12.0
System win10
Browser Google Chrome 78.0.3904.108

Open peproduction link,paste the code below.
(打开重现链接,并粘贴下面的代码)

import { Affix, Button, Select } from 'antd';

const Option = Select.Option;

class Demo extends React.Component {
  state = {
    top: 10,
    bottom: 10,
  };

  render() {
    return (
      <div>
        <Affix offsetTop={this.state.top}>
          <Button
            type="primary"
            onClick={() => {
              this.setState({
                top: this.state.top + 10,
              });
            }}
          >
            Affix top
          </Button>
          <Select defaultValue="lucy" style={{ width: 120 }} >
            <Option value="lucy">Lucy</Option>
            <Option value="jack">Jack</Option>
          </Select>
          <Select defaultValue="lucy" style={{ width: 120 }} getPopupContainer={triggerNode => triggerNode.parentElement} >
            <Option value="lucy">Lucy</Option>
            <Option value="jack">Jack</Option>
          </Select>
          <select>
            <option value="lucy">Lucy</option>
            <option value="lucy">Jack</option>
          </select>
        </Affix>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
@afc163
Copy link
Member

afc163 commented Jan 6, 2020

image

问题是啥?

@1123612483
Copy link
Author

image

问题是啥?

选中之后,然后滚动页面
image
image

@afc163 afc163 closed this as completed Jan 9, 2020
@1123612483
Copy link
Author

https://ant.design/docs/react/faq-cn#Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-%E4%BC%9A%E8%B7%9F%E9%9A%8F%E6%BB%9A%E5%8A%A8%E6%9D%A1%E4%B8%8A%E4%B8%8B%E7%A7%BB%E5%8A%A8%EF%BC%9F

图片
第二个Select我用了getPopupContainer,点击Select展开后滚动,展开框和Select都分离了,确定没问题?

@afc163 afc163 reopened this Jan 11, 2020
@afc163 afc163 added the 3.x 3.x stable issue or bug fix, PR should be cherry-pick to master label Dec 10, 2021
@github-actions
Copy link
Contributor

Hi @1123612483. Current version (3.x) is off the maintenance period. We may not accept pull request or fix bug with it anymore. This topic will be auto closed.

你好 @1123612483,当前版本(3.x)已经过了维护期。我们不会再接受对其的相关 PR 与 issue。当前 topic 会被自动关闭。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3.x 3.x stable issue or bug fix, PR should be cherry-pick to master Inactive
Projects
None yet
Development

No branches or pull requests

4 participants