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: @ionic/react can not trigger "event.stopPropagation()" #30052

Open
3 tasks done
AlwaysLoveme opened this issue Nov 28, 2024 · 0 comments
Open
3 tasks done

bug: @ionic/react can not trigger "event.stopPropagation()" #30052

AlwaysLoveme opened this issue Nov 28, 2024 · 0 comments
Labels

Comments

@AlwaysLoveme
Copy link

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

import {IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox} from '@ionic/react';
import './Home.css';
import {useRef, useEffect} from 'react'

const Home: React.FC = () => {
    const ref = useRef<HTMLSpanElement>(null)
    useEffect(() => {
        ref.current?.addEventListener("click", (e) => {
            e.stopPropagation();
        });
    }, [])
    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Blank</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <IonHeader collapse="condense">
                    <IonToolbar>
                        <IonTitle size="large">Blank</IonTitle>
                    </IonToolbar>
                </IonHeader>
                <IonCheckbox>
                    123123
                    <span ref={ref}>StopPropagation</span>
                </IonCheckbox>
            </IonContent>
        </IonPage>
    );
};

export default Home;

click on SPAN ,trigger CheckBox selected

Expected Behavior

click on SPAN ,not trigger CheckBox change event

Steps to Reproduce

  1. ionic start test
  2. create react project

Code Reproduction URL

https://codesandbox.io/p/github/AlwaysLoveme/test/main?import=true

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/anonymous/.nvm/versions/node/v22.11.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.4.1

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v22.11.0 (/Users/anonymous/.nvm/versions/node/v22.11.0/bin/node)
npm : 10.9.0
OS : macOS Unknown

Environment:

http_proxy : http://127.0.0.1:7890
https_proxy : http://127.0.0.1:7890

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Nov 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant