-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
bug: v7 - React - onClick doesn't work in ionButton inside ionSelect #28818
Labels
Comments
liamdebeasi
added
package: core
@ionic/core package
type: bug
a confirmed bug report
labels
Jan 16, 2024
2 tasks
github-merge-queue bot
pushed a commit
that referenced
this issue
Jan 17, 2024
Issue number: resolves #28818 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Select has logic in place to prevent the overlay from opening when clicking the slotted content. As part of this, we need to deal with the `<label>` element dispatching another click that then bubbles up and causes the overlay to open when clicking the slotted content. We currently deal with this by calling `preventDefault` which prevents this extra event from being dispatched only when clicking the slotted content. We also call `stopPropagation`. This code is not necessary, and in most cases should not have any adverse effects on developer applications. However, this does impact React applications due to how React handles events. When a developer places `onClick` on a slotted element, a native "click" listener is not immediately applied to that element. Instead, React adds a native "click" listener to the root element of an application. When that listener's callback fires, React will dispatch a synthetic click event on the slotted element. Since we are calling `stopPropagation`, the click event never bubbles up to this root node's listener. As a result, the synthetic event is never dispatched on the slotted element, and the developed `onClick` callback never fires. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Select no longer prevents events from bubbling. The existing `event.preventDefault` is sufficient to prevent the label from dispatching another click (thereby causing the select overlay to open) when clicking the slotted content. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.6.5-dev.11705430252.1023daf3`
Thanks for the issue. This has been resolved via #28839, and a fix will be available in an upcoming release of Ionic Framework. |
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
The new functionality insert ionButton inside ionSelect work noramly to visualize but when is insert a function like the onClick dosen't work, the event isn't fired, have othen events that work normaly like onTouch(Start or End).
Expected Behavior
Just when insert the onClick and click the event be fire.
Steps to Reproduce
Code Reproduction URL
No response
Ionic Info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
Ionic:
Ionic CLI : 7.1.1 (C:\Users\Arcano\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/react 7.6.4
Capacitor:
Capacitor CLI : 5.4.1
@capacitor/android : 5.4.1
@capacitor/core : 5.4.1
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 1.7.3
System:
NodeJS : v18.16.0 (C:\Program Files\nodejs\node.exe)
npm : 9.5.1
OS : Windows 10
Additional Information
No response
The text was updated successfully, but these errors were encountered: