Skip to content
This repository has been archived by the owner on Aug 2, 2024. It is now read-only.

Invalid useState values in retargeted event handlers. #26

Open
AndreyLuzinov opened this issue Jan 22, 2020 · 2 comments
Open

Invalid useState values in retargeted event handlers. #26

AndreyLuzinov opened this issue Jan 22, 2020 · 2 comments

Comments

@AndreyLuzinov
Copy link

AndreyLuzinov commented Jan 22, 2020

Event retargeted into functional component called with default useState values, not actual.

###Example:

  1. Place following functional component under shadow dom:
export default () => {
    const [ toggle, setToggle] = useState(false);

    const doToggle = () => {
        setToggle(!toggle);
    }

    return <div>
        <button onClick={doToggle}>Toggle</button>
        {toggle.toString()}
    </div>
}

###Result:
doToggle always called with toggle == false, ignoring the actual component state.
If I remove shadow dom and event retargeting, everything works fine.

@AndreyLuzinov
Copy link
Author

AndreyLuzinov commented Jan 22, 2020

Possible fix is to use react event handlers collection:

function findReactEventHandlers(item) {
    for (var key in item) {
        if (item.hasOwnProperty(key) && key.indexOf('__reactEventHandlers') !== -1) {
            return item[key];
        }
    }
}

@AndreyLuzinov
Copy link
Author

AndreyLuzinov commented Jan 22, 2020

@LukasBombach Looks like we already have fix in PR: #12

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant