Skip to content

fix(components): fix iOS select click event listening#16393

Merged
btea merged 1 commit intoelement-plus:devfrom
raphaelbernhart:fix-ios-select-click-event-not-handled
Jun 20, 2024
Merged

fix(components): fix iOS select click event listening#16393
btea merged 1 commit intoelement-plus:devfrom
raphaelbernhart:fix-ios-select-click-event-not-handled

Conversation

@raphaelbernhart
Copy link
Copy Markdown
Contributor

@raphaelbernhart raphaelbernhart commented Apr 4, 2024 •
edited
Loading

Problem / fix

iOS Safari does not handle click events when a mouseenter event is registered and a DOM-change happens in a child.
We use a Vue custom event binding to only register the event on non-iOS devices.

The inputHovering state gets updated now on iOS-devices on click. This is needed as the mouseenter event normally does this.

Apple Developer Documentation: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Vue Issue: vuejs/vue#9859

Here are some test-case recordings

Before changes

Screen.Recording.2024-04-04.at.11.07.08.mov

After changes

Screen.Recording.2024-04-04.at.11.09.15.mov

closed #5210

@raphaelbernhart
fix(components): fix iOS select click event listening
d5a0ed6 
iOS Safari does not handle click events when a mouseenter event is registered and a DOM-change
happens in a child. We use a Vue custom event binding to only register the event on non-iOS devices.
The inputHovering state gets updated now on iOS-devices on click. This is needed as the mouseenter
event normally does this.

closed element-plus#5210
@pull-request-triage
Copy link
Copy Markdown

pull-request-triage Bot commented Apr 4, 2024

👋 @raphaelbernhart, seems like this is your first time contribution to element-plus.

  • Please make sure that you have read our guidelines and code of conduct before making a contribution.
  • 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.

@pull-request-triage pull-request-triage Bot added 1st contribution Their very first contribution Needs Review labels Apr 4, 2024
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 4, 2024 •
edited
Loading

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 4, 2024

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

@raphaelbernhart raphaelbernhart mentioned this pull request Apr 4, 2024
Closed
@github-actions github-actions Bot added the CommitMessage::Qualified Qualified commit message label Apr 4, 2024
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 4, 2024

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

@btea
Copy link
Copy Markdown
Member

btea commented Apr 5, 2024

@kooriookami @tolking Do you have relevant device verification?

@kooriookami
Copy link
Copy Markdown
Member

kooriookami commented Apr 5, 2024

@kooriookami @tolking Do you have relevant device verification?

No, I have no IOS device.

@btea btea requested a review from a team April 7, 2024 09:26
@raphaelbernhart
Copy link
Copy Markdown
Contributor Author

raphaelbernhart commented Jun 12, 2024

@btea Is there any updates here? :)

We fixed it now with a custom installation of element-plus but we would really like to just use the npm package.

@warmthsea
Copy link
Copy Markdown
Member

warmthsea commented Jun 12, 2024

@btea Is there any updates here? :)

We fixed it now with a custom installation of element-plus but we would really like to just use the npm package.

I will participate in the verification tomorrow when I have time.

warmthsea
warmthsea reviewed Jun 13, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@warmthsea warmthsea left a comment •
edited
Loading

Choose a reason for hiding this comment

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

https://warmthsea.github.io/ios-select.mp4

test repo

test preview link

This PR does solve the problem that select(clearable) on iOS needs to be clicked twice before it can be opened.

(I only tested Safari on iOS Phone.)

@warmthsea
Copy link
Copy Markdown
Member

warmthsea commented Jun 13, 2024

@btea Is there any updates here? :)

We fixed it now with a custom installation of element-plus but we would really like to just use the npm package.

You can consider publishing your own element-plus npm package for the time being.

@raphaelbernhart
Copy link
Copy Markdown
Contributor Author

raphaelbernhart commented Jun 13, 2024

@btea Is there any updates here? :)
We fixed it now with a custom installation of element-plus but we would really like to just use the npm package.

You can consider publishing your own element-plus npm package for the time being.

Yes, tho atm it is ok for us to keep the package locally, it would just be nice to have the upstream package for updating purposes. :)

Thanks for the review!

@btea
Copy link
Copy Markdown
Member

btea commented Jun 14, 2024

Thanks @warmthsea for the verification. @raphaelbernhart , sorry for the long time no response, I will try to verify it over the weekend.

@btea
Copy link
Copy Markdown
Member

btea commented Jun 16, 2024

@raphaelbernhart It seems to be related to the system version. I used Safari to simulate an iPhone 15 and there seemed no problem. 🤔

@raphaelbernhart
Copy link
Copy Markdown
Contributor Author

raphaelbernhart commented Jun 17, 2024 •
edited
Loading

@raphaelbernhart It seems to be related to the system version. I used Safari to simulate an iPhone 15 and there seemed no problem. 🤔

Thanks for testing, tho I think this has something to do with your test environment. How did you simulate the iPhone 15?

We tested it both on real devices (iPhone XR - iOS 16, iPhone 15 iOS 17) and a lot of simulated devices and it never works.
Also keep in mind that the problem is just when selecting an option and then again trying to open the options.

Also as mentioned above I think this is not a "bug" on iOS devices but rather intended behaviour.
see: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

@btea
Copy link
Copy Markdown
Member

btea commented Jun 17, 2024

Also keep in mind that the problem is just when selecting an option and then again trying to open the options.

Following the steps you described, it actually happened.

btea
btea approved these changes Jun 17, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@btea btea left a comment

Choose a reason for hiding this comment

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

Thanks!

@btea btea merged commit 03e8be2 into element-plus:dev Jun 20, 2024
@element-bot element-bot mentioned this pull request Jun 21, 2024
Merged
3 tasks
This was referenced Jul 13, 2024
Merged
Open
@Ramyromel Ramyromel mentioned this pull request Jul 23, 2024
Open
@Samad2011s Samad2011s mentioned this pull request Jul 28, 2024
Open
@Shahzeb892 Shahzeb892 mentioned this pull request Aug 2, 2024
Open
@Bidur2054 Bidur2054 mentioned this pull request Aug 2, 2024
Open
@warmthsea warmthsea mentioned this pull request Mar 25, 2026
Open
@ixyzorg ixyzorg mentioned this pull request Apr 12, 2026
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@warmthsea warmthsea warmthsea left review comments

@btea btea btea approved these changes

Assignees

@raphaelbernhart raphaelbernhart

Labels

1st contribution Their very first contribution CommitMessage::Qualified Qualified commit message Contribution::Community Needs Review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug Report] El-Input with clearable attribute had text need click twice to open keyboard on iOS Safari

4 participants

@raphaelbernhart @btea @kooriookami @warmthsea