Popup (React) on Functions create stale closures

Questions
1

Popup onPopupClose creates a stale closure. I want to confirm if this is intended behavior?

const ImagePopup: React.FC<IImageModalPopupProps> = ({ base64 }) => {

    const [open, setOpen] = useState(true);
    const [src, setSrc] = useState(base64);

    // some callback code sets src

   const onClose = () => {

        // src is stale

    }

return (
        <Popup
            opened={open}
            onPopupClose={() => onClose()}>
            <Page>
                ...                  
            </Page>
        </Popup>
    );

My workaround is to copy all state variables into a ref in useEffect and then access that in onClose. I suspect this will happen with other on Functions as well. I could not find anything in the documentation to state that it creates stale closures.

2

I would say it is a bug, which is fixed and will available in next update fix(react): fix events to be reactive in Actions, LoginScreen, Panel,… · framework7io/framework7@8799b44 · GitHub

3

Should be fixed now in 6.0.15

4

Thank you for the speedy response.

It seems there is another issue now as the react event does not fire.
When closing the popup via state attribute the following events happen:

  1. line 145: modalEvents(‘off’);
  2. line 87: _f7Popup.current.close();
  3. line 143: modalEvents(‘on’);

So it seems that _f7Popup.current.close() runs after events have been unbound?

5

ok, will check on a days

6

Thanks Vladimir.

My mistake, it is working correctly.

I looked at the kitchen sink example which is working. The kitchen sink adds popupClose attribute to the link that closes it and fires the event which I did not have on my close link. The kitchen sink then sets the state variable in the onClose callback.

Great framework!

const HomePage = () => {

    let [isOpen, setIsOpen] = useState(false);

    const onClose = () => {

        console.log('closed');
        setIsOpen(false);

    }

    return (
        <Page name="home">
            {/* Top Navbar */}
            <Navbar>
                <NavTitle>Home Page</NavTitle>
            </Navbar>
            {/* Toolbar */}
            <Toolbar bottom>
                <Link>Dummy</Link>
                <Link onClick={() => setIsOpen(true)}>Open popup</Link>
            </Toolbar>
            {/* Page content */}

            <Popup
                opened={isOpen}
                onPopupClose={onClose}>
                <Navbar title="Manage Document">
                    <NavRight>
                        <Link popupClose>Cancel</Link>
                    </NavRight>
                </Navbar>
                <Button popupClose>Done works</Button>
                <Button onClick={() => setIsOpen(false)}>Done does not work as it needs popupClose attribute</Button>

            </Popup>

        </Page>
    );
}
1 Like