EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on September 21, 2020, 08:45:18 AM



Title: Messager error when triggered from dialog header
Post by: chrwei on September 21, 2020, 08:45:18 AM
I'm trying to add a close confirmation prompt on a dialog, but I'm getting this error. Am i missing something?

Code:
Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at t.value (rc-easyui-min.js:15)
    at t.value (rc-easyui-min.js:15)
    at t.value (rc-easyui-min.js:15)
    at Object.onClick (rc-easyui-min.js:15)
    at t.value (rc-easyui-min.js:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

Code:
import React, { useRef, useState } from 'react';
import './App.css';
import { Dialog, LinkButton, Messager } from 'rc-easyui';

function App() {
    const messager = useRef();
    const [closed, setClosed] = useState(false);

    function onClose() {
        if(!closed) {
            messager.current.confirm({
                title: "Confirm",
                msg: "Are you sure?",
                result: r => {
                    if (r) {
                        setClosed(true);
                    }
                }
            });
        }
    }

    function header() {
        //window-restore
        return (
            <div key="x">
                <div className="panel-title">Test</div>
                <LinkButton style={{ position: "absolute", right: "0px", top: "0px", height: "19px" }} plain onClick={onClose}>
                    <i >X</i>
                </LinkButton>
            </div>
        )
    }

    return (
        <div>
            <Dialog
                header={header}
                closed={closed}
                closable={false}
            >
                Content
            </Dialog>
            <Messager ref={messager} />
        </div>
    );
}
export default App;


Title: Re: Messager error when triggered from dialog header
Post by: chrwei on September 22, 2020, 12:09:12 PM
I'm now getting this error in other places too, but not in all places.  the dialog cannot be closed when it happens.


Title: Re: Messager error when triggered from dialog header
Post by: chrwei on September 23, 2020, 06:57:07 AM
Messager works fine in 1.1.27, 1.1.28's have broken it


Title: Re: Messager error when triggered from dialog header
Post by: chrwei on September 24, 2020, 08:13:32 AM
possibly related to this change?

1.1.27:
Code:
                    s.a.createElement("div", {
                        className: "dialog-inline",
                        ref: function(t) {
                            return e.dialogContainer = t
                        }
                    }, i)

1.1.28
Code:
                    u.a.createPortal(i, document.body)

the latter seems to be missing the setting of dialogContainer, which I think is the "undefined" being referenced in the error


Title: Re: Messager error when triggered from dialog header
Post by: jarry on September 24, 2020, 09:10:24 PM
Please try to update to the newest version.


Title: Re: Messager error when triggered from dialog header
Post by: chrwei on September 29, 2020, 10:57:58 AM
seems to work, thanks