ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
91.69k stars 48.5k forks source link

Select clear button does not work on iPad #28917

Open Chris-myEdOnline opened 3 years ago

Chris-myEdOnline commented 3 years ago

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Select any item, open the dropdown, click at the clear button

What is expected?

Items are cleared

What is actually happening?

Items does not clear

Environment Info
antd 4.9.2
React 16.14.0
System iPad IOS 14
Browser Safari 14

Double clicking the clear button will work. Single clicking will not. Select ipad bug

zaidyahya commented 2 years ago

Hi, I'm having the same issue on iPhone. Having to double-click on the button to get it to clear on iPhone; it works fine on desktop browser. Did you get a resolution to this?

Environment Info
antd 4.19.5
React 18.0.0
System iPhone 13 Pro
Browser Safari 15

I also tried with the latest antd version at time of writing, antd==4.20.5, with no success.

jiangqm commented 1 year ago

Has it been solved?

jiangqm commented 1 year ago

你好,我在 iPhone 上遇到了同样的问题。必须双击该按钮才能在 iPhone 上清除它;它在桌面浏览器上运行良好。您对此有解决方案吗?

环境 信息 蚂蚁 4.19.5 反应 18.0.0 系统 iPhone 13 专业版 浏览器 野生动物园 15 在撰写本文时,我还尝试了最新的 antd 版本,antd==4.20.5,但没有成功。

Has it been solved?

mariomurrent-softwaresolutions commented 1 year ago

Any updates on this?

RashmiChandrasekhar commented 1 year ago

Any solutions for this issue?

IonelLupu commented 1 year ago

I got the same issue on Safari iOS. There aren't event ways to hack this and we can't fix it. Our entire iOS user base just doesn't exist for us.

I swear Safari on iOS is the new Internet Explorer 😂

After some investigation, it seems the .ant-select-selector component is in the way of the X button. Adding this width: calc(100% - 35px) !important; to .ant-select-selector will make the X button work. But it will also move the dropdown.

Will investigate more

Edit

I just found out that you can use double click (in iOS simulator to clear the select box). But this is not the ideal behaviour.

https://github.com/ant-design/ant-design/assets/4083652/55b214ef-3fb5-4dbe-ac72-a83f8f066217

Here is another repro link: https://stackblitz.com/edit/react-pr3fcp?file=demo.tsx

@afc163 any idea what this issue can be?

ductoan212 commented 1 year ago

When I change clearIcon with a button, it looks like we can fix this issue clearIcon={<button>X</button>}

But when we do that, we must lick 2 times to focus on the select :(

wootera commented 11 months ago

+1 Any update on this?

clluiz commented 4 months ago

Updates on this issue?

vanthangnamdinh commented 3 months ago

Any updates on this?

yimity commented 2 months ago

Any updates on this?

KuznetsovCreator commented 2 weeks ago

Any updates on this?

KonstantinKonshu commented 2 weeks ago

Any updates on this?

github-actions[bot] commented 2 weeks ago

Hello @Chris-myEdOnline. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @Chris-myEdOnline,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy