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.

Sign up for GitHub

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

Jump to bottom

Event not invoked in ShadowDom's non-root node. #15759

Closed
Jack-Works opened this issue May 29, 2019 · 10 comments
Closed

Event not invoked in ShadowDom's non-root node. #15759

Jack-Works opened this issue May 29, 2019 · 10 comments

Comments

@Jack-Works
Copy link
Contributor

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
The second h1 onClick not responding

Reproduce:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<body>
    <div id="1"></div>
    <div id="2"></div>
</body>
<script>
    function Component() {
        return React.createElement('h1', {onClick() { alert('click!') }}, 'Click me!')
    }
    const shadow1 = document.getElementById('1').attachShadow({mode: 'closed'})
    const shadow2 = document.getElementById('2').attachShadow({mode: 'closed'})
    const inner = document.createElement('div')
    shadow2.appendChild(inner)

    ReactDOM.render(React.createElement(Component), shadow1)
    ReactDOM.render(React.createElement(Component), inner)
</script>

What is the expected behavior?
The first h1 works, the second h1 works too.
@Jack-Works Jack-Works mentioned this issue May 29, 2019
Closed
6 tasks
@Jack-Works
Copy link
Contributor Author

Jack-Works commented Jun 14, 2019 •
edited
Loading

If anyone interested, here is a hack that can resolve problems by event lost due to ShadowRoot.
Full example at mui/material-ui#16223

{
        // ? Hack for React, let event go through ShadowDom
        const hackingEvents = new WeakMap()
        function hack(eventName, shadowRoot) {
            shadowRoot.addEventListener(eventName, e => {
                if (hackingEvents.has(e)) return
                const path = e.composedPath()
                var e2 = new e.constructor(e.type, e)
                hackingEvents.set(e2, path)
                shadowRoot.dispatchEvent(e2)
                e.stopPropagation()
                e.stopImmediatePropagation()
            })
        }
        // call hack with parameter1 = Event name you want to make it work with ShadowRoot
        // parameter2 = the shadow root
        hack('click', portal)
        var nativeTarget = Object.getOwnPropertyDescriptor(Event.prototype, 'target').get
        Object.defineProperty(Event.prototype, 'target', {
            get() {
                if (hackingEvents.has(this)) return hackingEvents.get(this)[0]
                return nativeTarget.call(this)
            }
        })
    }

@felixfbecker felixfbecker mentioned this issue Oct 28, 2019
Closed
@stale
Copy link

stale bot commented Jan 10, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Jan 10, 2020
@Jack-Works
Copy link
Contributor Author

Wait. This bug is not fixed yet. Don't close it.

@stale stale bot removed the Resolution: Stale Automatically closed due to inactivity label Jan 10, 2020
@stale
Copy link

stale bot commented Apr 9, 2020

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any additional information, please include with in your comment!

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Apr 9, 2020
@Jack-Works
Copy link
Contributor Author

Don't close

@stale stale bot removed the Resolution: Stale Automatically closed due to inactivity label Apr 9, 2020
@stale
Copy link

stale bot commented Jul 11, 2020

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Jul 11, 2020
@Jack-Works
Copy link
Contributor Author

Bump

@stale stale bot removed the Resolution: Stale Automatically closed due to inactivity label Jul 11, 2020
@stale
Copy link

stale bot commented Oct 12, 2020

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@stale stale bot added the Resolution: Stale Automatically closed due to inactivity label Oct 12, 2020
@Jack-Works
Copy link
Contributor Author

Let me try if it is fixed in react 17 later

@stale stale bot removed the Resolution: Stale Automatically closed due to inactivity label Oct 12, 2020
@Jack-Works
Copy link
Contributor Author

resolved in 17.0.0-rc.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Jack-Works