Still an issue, only happens in create-react-app's "npm react-scripts start", it's fine when deployed.  this is making testing very tedious.

I've worked out how to add this on my own by using $.extend, but it requires that I maintain a copy of part of the core code, and is heavily based on that code so the license doesn't allow sharing or distributing it.  (I don't distribute it, it's for my own use)

ComboBox has up and down handlers for keyboard nav, but it only works when the drop down is open.  I expect it to work when the drop down is closed too, since the basic HTML <select> and desktop apps all do it.

For the Datebox, when the calendar box is open, it navigates by day for left/right and week for up/down.  I also have it have it nav by day when the calendar is closed, but I understand not everyone would want this.

Please add these additional keyboard nav features.

Since my datebox code isn't based on your code, I'll provide that here.  it's simple and somewhat obvious, so use it as you wish.

Code:

(function($){
  $.extend($.fn.datebox.defaults.keyHandler, {
    up: function (e) {
      var v = new Date();
      if($(e.data.target).datebox('getValue') != "") {
        v = new Date(Date.parse($(e.data.target).datebox('getValue')));
      }
      if ($(e.data.target).datebox('panel').parent().css('display') == "none") {
        v.setDate(v.getDate() + 1);
      } else {
        v.setDate(v.getDate() - 7);
      }
      $(e.data.target).datebox('setValue', v.format("shortDate"));
    },
    down: function (e) {
      var v = new Date();
      if($(e.data.target).datebox('getValue') != "") {
        v = new Date(Date.parse($(e.data.target).datebox('getValue')));
      }
      if ($(e.data.target).datebox('panel').parent().css('display') == "none") {
        v.setDate(v.getDate() - 1);
      } else {
        v.setDate(v.getDate() + 7);
      }
      $(e.data.target).datebox('setValue', v.format("shortDate"));
    },
    left: function (e) {
      var v = new Date();
      if($(e.data.target).datebox('getValue') != "") {
        v = new Date(Date.parse($(e.data.target).datebox('getValue')));
      }
      v.setDate(v.getDate() - 1);
      $(e.data.target).datebox('setValue', v.format("shortDate"));
    },
    right: function (e) {
      var v = new Date();
      if($(e.data.target).datebox('getValue') != "") {
        v = new Date(Date.parse($(e.data.target).datebox('getValue')));
      }
      v.setDate(v.getDate() + 1);
      $(e.data.target).datebox('setValue', v.format("shortDate"));
    }
  });
})(jQuery);

I'm sharing some Messager extensions I made, use it as you see fit, it's more of an example.  The docs mention that you can provide a options object, but there's no detail on what that object should look like.  This shows some things you can do.

We mostly use Yes/No instead of OK/Cancel, so I added a yesno() for easy use, and also a yesnocancel() which shows how to do additional buttons and custom callback values. 

password() shows how to customize the prompt

prompt2() adds an option to supply a default value, would be great if this were just built in

login() shows a more complex multi-input dialog as a simple messager, with a callback object instead of just a simple value.

the bindHotkeys() wrapper adds support for a hotkey, so on the yesno the user can just press y or n to answer the prompt.  it can be added no matter what buttons you provide, it'll hotkey the first unique character of each button, or you can add your own <u> tag to specify it yourself in the button label.  a built in way to do this would be great too.  I know escape closes the dialog but does nor call your callback which does not help in handling "user canceled the event" process, and enter will click the focused button, which is great.  hotkeys add better support for custom buttons.

Code:

(function($){
  function bindHotkeys(msgr) {
    var win = $("body").children("div.messager-window");
    if (!win.length) {
      return msgr;
    }
    var buttonwrapper = win.find(".messager-button");
    var buttons = {};
    buttonwrapper.find(".l-btn-text").each(function() {
      var c = this.innerHTML.match(/<u>(.)<\/u>/);//do we already have a single char underline
      if(c) {
        buttons[c[1].toUpperCase()] = this; //keep it
      } else {
        var i = 0; //find first unique char
        c = this.innerHTML.substr(i,1).toUpperCase();
        while(buttons[c]) {
          i++;
          c = this.innerHTML.substr(i,1).toUpperCase();
        }
        buttons[c] = this;
        this.innerHTML = this.innerHTML.substr(0,i) + "<u>" + this.innerHTML.substr(i,1) + "</u>" + this.innerHTML.substring(i+1); //add the underline
      }
    });

    buttonwrapper.on("keypress", function(event) {
      for(var btn in buttons){
        if (String.fromCharCode(event.which).toUpperCase() == btn) {
          $(buttons[btn]).click();
          event.preventDefault();
        }
      }
    });
    return msgr;
  }
  function closeDialog(dlg, retval) {
    var opts = dlg.dialog("options");
    dlg.dialog("close");
    opts.fn(retval);
  };

  $.extend($.messager, {
    //$.messager supports a config object that allows overriding the content
    prompt2: function(title, msg, value, fn) { 
      var content = "<div class=\"messager-icon messager-question\"></div>" + "<div>" + msg + "</div>" + "<br/>" + "<div style=\"clear:both;\"/>" + "<div><input class=\"messager-input\" type=\"text\" value=\"" + value + "\"/></div>";
      return bindHotkeys($.messager.prompt({
        title: title, msg: msg, fn: fn,
        content: content
      }));
    },
    password:function(title,msg,fn){
      var content="<div class=\"messager-icon messager-question\"></div>"+"<div>"+msg+"</div>"+"<br/>"+"<div style=\"clear:both;\"/>"+"<div><input class=\"messager-input\" type=\"password\"/></div>";
      return bindHotkeys($.messager.prompt({
        title: title, msg: msg, fn: fn,
        content: content
      }));
    },
    login:function(title,msg,fn){
      var content="<div class=\"messager-icon messager-question\"></div>"+"<div>"+msg+"</div>"+"<br/>"+"<div style=\"clear:both;\"/>"
        +"<div class=\"righttext\">Login ID: <input class=\"messager-input messager-id\" type=\"text\" style=\"width:auto;\"/></div>"
        +"<div class=\"righttext\">Password: <input class=\"messager-input messager-pass\" type=\"password\" style=\"width:auto;\"/></div>";
      var dlg = $.messager.prompt({
        title: title, msg: msg, fn: fn,
        content: content,
        buttons: [{
          text: $.messager.defaults.ok, onClick: function () {
            closeDialog(dlg, {id:dlg.find(".messager-id").val(), pass:dlg.find(".messager-pass").val()});
          }
        }, {
          text: $.messager.defaults.cancel, onClick: function () {
            closeDialog(dlg, false);
          }
        }]
      });
      dlg.find(".messager-input:first").focus();
      return bindHotkeys(dlg);
    },
    yesnocancel: function(title, msg, fn) { //$.messager supports a button array in the options, so this is for backwards compat
      var dlg = $.messager.confirm({
        title: title, msg: msg, fn: fn,
        buttons: [{
          text: $.messager.defaults.yes, onClick: function () {
            closeDialog(dlg, "y");
          }
        }, {
          text: $.messager.defaults.no, onClick: function () {
            closeDialog(dlg, "n");
          }
        }, {
          text: $.messager.defaults.cancel, onClick: function () {
            closeDialog(dlg, "c");
          }
        }]
      });
      return bindHotkeys(dlg);
    },
    yesno: function(title, msg, fn, buttontitles) { //$.messager supports a button names in the options, so this is for backwards compat
      return bindHotkeys($.messager.confirm({
        title: title, msg: msg, fn: fn,
        ok: (buttontitles?buttontitles.yes:$.messager.defaults.yes),
        cancel: (buttontitles?buttontitles.no:$.messager.defaults.no),
      }));
    },
  });
  $.extend($.messager.defaults, {
    yes: "Yes",
    no: "No"
  });
})(jQuery);

Might be related, <SideMenu collapsed={true}> is also not poping the menu out in dev but is once built.

I made a simple test that works just fine, code is below.  Using the same pattern this has been working for months.  recently it has stopped working in development (create-react-app's "react-scripts start"), but works fine after "react-scripts build".  it's the same in Firefox, Chrome, and Edge-Legacy.  I can open the devtools and I see the div created in the DOM on hover, and keyboard navigating to the node does cause the browser to highlight where it should be.  Editing the style to change the z-order has no effect, even with 10x changes.  Editing display and position does cause the text to display below all other elements or affect the page layout.

What might cause the code below to work in one project in dev but not another?  I'm concerned the issue will spread to the build at some point.

Code:

import React from 'react';
import './App.css';
import { Form, FormField, TextBox, Tooltip } from 'rc-easyui';

function App() {
    const model ={foo:""};
    return (
        <Form 
            model={model}
        >
            <FormField name="foo" style={{ ...{ marginBottom: "5px", marginRight: "10px" } }}
                label="Field" 
            >
                <Tooltip tooltipCls="form-field-focused" tooltipStyle={{maxWidth:"300px"}} position="top" content="This is a tooltip"><i style={{ fontSize: "14px" }} >??</i></Tooltip>
                <TextBox />
            </FormField>
            <FormField name="bar" style={{ ...{ marginBottom: "5px", marginRight: "10px" } }}
                label="another Field" 
            >
                <Tooltip tooltipCls="form-field-focused" tooltipStyle={{maxWidth:"300px"}} position="top" content="This is a tooltip"><i style={{ fontSize: "14px" }} >??</i></Tooltip>
                <TextBox />
            </FormField>
        </Form>
    );
}
export default App;

seems to work, thanks

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

Messager works fine in 1.1.27, 1.1.28's have broken it

I'm now getting this error in other places too, but not in all places.  the dialog cannot be closed when it happens.

I have minimize/restore working (click the M and R, these will be icons eventually), but when adding resize it works until you do actually resize, then it ignores the style tag entirely.  How can I override this?  I've tried 'resizable={windowSize.current==="show"}' but it has no effect

Code:

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

function App() {
    const [closed, setClosed] = useState(false);
    const [windowSize, setWindowSize] = useState({
        current:"show",
        show: {
            height:315, width:285, 
            icon:"M"
        },
        hide: {
            height:28, width:150, 
            icon:"R"
        }
    });

    function onClose() {
        if(!closed) {
            setClosed(true);
        }
    }

    function header() {
        return (
            <div key="x">
                <div className="panel-title">Test</div>
                <LinkButton style={{ position: "absolute", right: "20px", top: "0px", height: "19px" }} plain onClick={onMinRestore}>
                    <i>{windowSize[windowSize.current].icon}</i>
                </LinkButton>
                <LinkButton style={{ position: "absolute", right: "0px", top: "0px", height: "19px" }} plain onClick={onClose}>
                    <i >X</i>
                </LinkButton>
            </div>
        )
    }

    function onResize({...size}) {
        let newState = {...{}, ...windowSize};
        newState.show.height = size.height;
        newState.show.width = size.width;
        setWindowSize(newState);
    }

    function onMinRestore() {
        let newState = {...{}, ...windowSize};
        if(newState.current==="show") {
            newState.current = "hide";
        } else {
            newState.current = "show";
        }
        setWindowSize(newState);
    }


    return (
        <div>
            <Dialog
                header={header}
                style={{ position:"fixed", top:(window.innerHeight-(windowSize[windowSize.current].height+10))+"px", left: (window.innerWidth-(windowSize[windowSize.current].width+20))+"px", height: windowSize[windowSize.current].height+"px", width: windowSize[windowSize.current].width+"px" }}
                closed={closed}
                closable={false}
                resizable={true}
                onResize={onResize}
            >
                Content
            </Dialog>
        </div>
    );
}
export default App;

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;

it was timezones.  javascript's date object is a real pain across timezones.

I've found they have a SonicWall, and it isn't reporting anything being filtered.

I have this validator

Code:

calendarOptions={{
	validator: (date) => {
		let now = new Date();
		let day90 = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 90);
		//converted to match database 
		let compday = new Date(date).toISOString();
		return date <= day90 && listData.dateList.indexOf(compday) >= 0;
	}
}}

I have one customer that this does not work for (all dates are not valid), with no errors on the console log.  I was able to verify that the array is actually populated, I'm adding a log inside the validator next to make sure that's running.  I'm also removing the 90 day check and building that into the date list instead.

are there any known Chrome extensions that might cause these sort of problems with EasyUI?

perfect.  thanks.