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

bug: v7 - React - onClick doesn't work in ionButton inside ionSelect #28818

Closed
3 tasks done
julio-bandeira opened this issue Jan 11, 2024 · 2 comments · Fixed by #28839
Closed
3 tasks done

bug: v7 - React - onClick doesn't work in ionButton inside ionSelect #28818

julio-bandeira opened this issue Jan 11, 2024 · 2 comments · Fixed by #28839
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@julio-bandeira
Copy link

julio-bandeira commented Jan 11, 2024

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

<IonSelect
        label='Level 1'
        placeholder="Select Level 1"
        labelPlacement="floating"
        fill="solid"
        value={'test'}
        onIonChange={e=>{}}
>
       <IonSelectOption value="test">Opt</IonSelectOption>
       <IonButton fill="clear" slot="end" onClick={e=>{alert('fire')}}>
          <IonIcon slot="icon-only" color='dark' icon={addCircle}></IonIcon>
       </IonButton>
</IonSelect>

Code Reproduction URL

No response

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - C:\Users\Arcano\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\Arcano\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\Arcano\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\Arcano\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

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

@ionitron-bot ionitron-bot bot added the triage label Jan 11, 2024
@liamdebeasi liamdebeasi self-assigned this Jan 16, 2024
@liamdebeasi liamdebeasi added package: core @ionic/core package type: bug a confirmed bug report labels Jan 16, 2024
@liamdebeasi liamdebeasi removed their assignment Jan 16, 2024
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`
@liamdebeasi
Copy link
Contributor

Thanks for the issue. This has been resolved via #28839, and a fix will be available in an upcoming release of Ionic Framework.

Copy link

ionitron-bot bot commented Feb 16, 2024

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Feb 16, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants