Not working with React event handlers #229

New Issue

2020-09-25T03:51:20-05:00

julienc91 commented

2020-09-25 03:51:20 -05:00

(Migrated from github.com)

Hi,

I'm using pjax along with some React components. I'm trying to disable some links programmatically, depending on the current state of the component, by using onClick/onClickCapture event handlers along with some stopPropagation and preventDefault methods. But this is not working as expected, as the links are still enabled.

Here is a small example to reproduce:

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test pjax</title>
</head>
<body>
    <div><a href="/foo.html" onclick="return false">Go to /foo without React</a></div>
    <div id="root"></div>

    <script crossorigin src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

    <script>
        const pjax = new Pjax({
            selectors: ['body'],
            elements: 'a'
        })
    </script>

    <script type="text/babel">
        const App = () => {

            React.useEffect(() => {
                pjax.refresh()
            }, [])

            const handleClick = e => {
                e.preventDefault()
                e.stopPropagation()
                return false
            }

            return (
                <div onClickCapture={handleClick}>
                    <a onClick={handleClick} href="/foo.html">Go to /foo with React</a>
                </div>
            )
        }

        ReactDOM.render(<App />, document.getElementById('root'))
    </script>
</body>
</html>

foo.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test pjax</title>
</head>
<body>
    This page should not have been reached
</body>
</html>

Tested with the latest versions of Firefox and Chrome.

Hi, I'm using pjax along with some React components. I'm trying to disable some links programmatically, depending on the current state of the component, by using `onClick`/`onClickCapture` event handlers along with some `stopPropagation` and `preventDefault` methods. But this is not working as expected, as the links are still enabled. Here is a small example to reproduce: * index.html ```html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test pjax</title> </head> <body> <div><a href="/foo.html" onclick="return false">Go to /foo without React</a></div> <div id="root"></div> <script crossorigin src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <script> const pjax = new Pjax({ selectors: ['body'], elements: 'a' }) </script> <script type="text/babel"> const App = () => { React.useEffect(() => { pjax.refresh() }, []) const handleClick = e => { e.preventDefault() e.stopPropagation() return false } return ( <div onClickCapture={handleClick}> <a onClick={handleClick} href="/foo.html">Go to /foo with React</a> </div> ) } ReactDOM.render(<App />, document.getElementById('root')) </script> </body> </html> ``` * foo.html ```foo.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test pjax</title> </head> <body> This page should not have been reached </body> </html> ``` Tested with the latest versions of Firefox and Chrome.

julienc91 commented

2020-09-25 08:47:34 -05:00

(Migrated from github.com)

From what I understand, this is because React's SyntheticEvents are always processed after native events, which are the one used by Pjax.
A quick test shows indeed that the isDefaultPrevented function returns false after the onClick handler is being called, but this is already too late.

The solution is... don't mix native events with React events, which means using a React-compatible version of pjax. Unfortunately for me, this won't be possible as my app is not a full-React app, but just isolated components here and there, but this is definitely not pjax's fault.

Anyway, if someone still manages to find a workaround for this particular case, I'd be happy to see it!

From what I understand, this is because React's [`SyntheticEvents`](https://fr.reactjs.org/docs/events.html) are always processed after native events, which are the one used by Pjax. A quick test shows indeed that the `isDefaultPrevented` function returns `false` after the `onClick` handler is being called, but this is already too late. The solution is... don't mix native events with React events, which means using a React-compatible version of pjax. Unfortunately for me, this won't be possible as my app is not a full-React app, but just isolated components here and there, but this is definitely not pjax's fault. Anyway, if someone still manages to find a workaround for this particular case, I'd be happy to see it!

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#229