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

fix(components): [select] iOS keyboard not appear when focus #11498

Merged
merged 5 commits into from
Mar 13, 2023

Conversation

MrWeilian
Copy link
Contributor

@MrWeilian MrWeilian commented Feb 10, 2023

fix: #11415

问题原因:
iOS系统限制非用户行为的 focus,仅有用户行为直接触发 或者 用户行为后的 回调函数同步触发 .focus() 才能弹起键盘。当前 el-input 组件 readonly 属性当激活下拉框的时候会被改成 false,由于异步更新关系,再触发 el.focus() 就会被系统拦截。

参考链接:

  1. input组件,autoFocus自动获取焦点不起作用 ant-design/ant-design-mobile#5256
  2. https://stackoverflow.com/questions/6287478/mobile-safari-autofocus-text-field

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

@pull-request-triage
Copy link

👋 @MrWeilian, thank you for contributing element-plus.

  • You can comment with /label Components:[component_name] to add a label for which component you are working on.
  • You may join our Discord for staying tuned.

@github-actions
Copy link

github-actions bot commented Feb 10, 2023

@github-actions
Copy link

Hello @MrWeilian, thank you for contributing to element-plus, please see our guideline to see how to make contribution

@github-actions
Copy link

github-actions bot commented Feb 10, 2023

🧪 Playground Preview: https://element-plus.run/?pr=11498
Please comment the example via this playground if needed.

@MrWeilian
Copy link
Contributor Author

MrWeilian commented Feb 10, 2023

playground

@MrWeilian
Copy link
Contributor Author

参考了设置 multiple 的情况,应该是让用户点了原生 input 先触发键盘弹起,等执行完 readonly 那个计算属性的更新时将焦点 focusel-input 那里面的 input 中。

@chenxch
Copy link
Member

chenxch commented Feb 11, 2023

键盘是弹出来了👍🏻,但是表现上存在一些问题哦

@MrWeilian
Copy link
Contributor Author

键盘是弹出来了👍🏻,但是表现上存在一些问题哦

大佬好,什么问题,我跟进下😂

@chenxch
Copy link
Member

chenxch commented Feb 11, 2023

RPReplay_Final1676125311.MP4

一个是选择后回出现一个下拉框的抖动,类似收齐又展开;然后多选似乎出bug了

@MrWeilian
Copy link
Contributor Author

MrWeilian commented Feb 12, 2023

RPReplay_Final1676125311.MP4
一个是选择后回出现一个下拉框的抖动,类似收齐又展开;然后多选似乎出bug了

@jw-foss @chenxch hello, I have solved this problem in the new commit. And I added a native input to trigger keyboard instead of to use the multiple native input when device is iOS and el-select is filterable.

@MrWeilian
Copy link
Contributor Author

RPReplay_Final1676645103.MOV

Copy link
Member

@jw-foss jw-foss left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code LGTM, /cc @chenxch could you help verify this? Thanks 🙇

@MrWeilian
Copy link
Contributor Author

@chenxch 大佬 cc 👀

@chenxch
Copy link
Member

chenxch commented Mar 13, 2023

@chenxch 大佬 cc 👀

晚点我看一下哈

@chenxch chenxch merged commit c89cc2d into element-plus:dev Mar 13, 2023
@MrWeilian MrWeilian deleted the fix/select-ios branch March 15, 2023 09:52
@element-bot element-bot mentioned this pull request Mar 19, 2023
3 tasks
loosheng pushed a commit to loosheng/element-plus that referenced this pull request Mar 26, 2023
…-plus#11498)

* fix(components): [select] ios keyboard not appear when focus
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Component] [select, tree-select] EL-Select 不开多选,在IOS系统中获取焦点不会弹出软键盘
3 participants