@pie-element/complex-rubric 2.18.3-next.0 → 2.18.3-next.4

package/controller/package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@pie-lib/pie-toolbox": "1.29.2",
+    "@pie-lib/pie-toolbox": "1.29.3",
     "lodash": "^4.17.15"
   },
   "author": "",

package/module/configure.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.22.1/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.22.2/module/index.js";
 import RubricConfigure from '@pie-element/rubric/configure/lib';
 import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@4.23.1/module/index.js";
 function _mergeNamespaces(n, m) {
@@ -137337,7 +137337,7 @@ const require$$10$w = _dll_classnames;
       key: "render",
       value: function render() {
         var latex = this.state.latex;
-        var _this$props = this.props, classNames = _this$props.classNames, autoFocus = _this$props.autoFocus, allowAnswerBlock = _this$props.allowAnswerBlock, onAnswerBlockAdd = _this$props.onAnswerBlockAdd, controlledKeypad = _this$props.controlledKeypad, controlledKeypadMode = _this$props.controlledKeypadMode, keypadMode = _this$props.keypadMode, noDecimal = _this$props.noDecimal, additionalKeys = _this$props.additionalKeys, showKeypad = _this$props.showKeypad, onFocus = _this$props.onFocus, onBlur = _this$props.onBlur, hideDoneButton = _this$props.hideDoneButton, error = _this$props.error, maxResponseAreas = _this$props.maxResponseAreas;
+        var _this$props = this.props, classNames = _this$props.classNames, autoFocus = _this$props.autoFocus, allowAnswerBlock = _this$props.allowAnswerBlock, onAnswerBlockAdd = _this$props.onAnswerBlockAdd, controlledKeypad = _this$props.controlledKeypad, controlledKeypadMode = _this$props.controlledKeypadMode, keypadMode = _this$props.keypadMode, noDecimal = _this$props.noDecimal, additionalKeys = _this$props.additionalKeys, showKeypad = _this$props.showKeypad, onFocus = _this$props.onFocus, onBlur = _this$props.onBlur, hideDoneButton = _this$props.hideDoneButton, error = _this$props.error, keyPadCharacterRef = _this$props.keyPadCharacterRef, maxResponseAreas = _this$props.maxResponseAreas;
         return _react["default"].createElement(PureToolbar, {
           autoFocus: autoFocus,
           classNames: classNames,
@@ -137347,6 +137347,7 @@ const require$$10$w = _dll_classnames;
           additionalKeys: additionalKeys,
           noDecimal: noDecimal,
           keypadMode: keypadMode,
+          keyPadCharacterRef: keyPadCharacterRef,
           onChange: this.onChange,
           onDone: this.done,
           onFocus: onFocus,
@@ -137408,9 +137409,10 @@ const require$$10$w = _dll_classnames;
     (0, _createClass2["default"])(RawPureToolbar, [{
       key: "render",
       value: function render() {
-        var _this$props2 = this.props, classNames = _this$props2.classNames, autoFocus = _this$props2.autoFocus, allowAnswerBlock = _this$props2.allowAnswerBlock, onAnswerBlockAdd = _this$props2.onAnswerBlockAdd, controlledKeypad = _this$props2.controlledKeypad, controlledKeypadMode = _this$props2.controlledKeypadMode, additionalKeys = _this$props2.additionalKeys, showKeypad = _this$props2.showKeypad, keypadMode = _this$props2.keypadMode, noDecimal = _this$props2.noDecimal, hideInput = _this$props2.hideInput, noLatexHandling = _this$props2.noLatexHandling, layoutForKeyPad = _this$props2.layoutForKeyPad, latex = _this$props2.latex, onChange = _this$props2.onChange, onDone = _this$props2.onDone, onFocus = _this$props2.onFocus, onBlur = _this$props2.onBlur, hideDoneButton = _this$props2.hideDoneButton, hideDoneButtonBackground = _this$props2.hideDoneButtonBackground, classes = _this$props2.classes, error = _this$props2.error, maxResponseAreas = _this$props2.maxResponseAreas;
+        var _this$props2 = this.props, classNames = _this$props2.classNames, autoFocus = _this$props2.autoFocus, allowAnswerBlock = _this$props2.allowAnswerBlock, onAnswerBlockAdd = _this$props2.onAnswerBlockAdd, controlledKeypad = _this$props2.controlledKeypad, controlledKeypadMode = _this$props2.controlledKeypadMode, additionalKeys = _this$props2.additionalKeys, showKeypad = _this$props2.showKeypad, keypadMode = _this$props2.keypadMode, noDecimal = _this$props2.noDecimal, hideInput = _this$props2.hideInput, noLatexHandling = _this$props2.noLatexHandling, layoutForKeyPad = _this$props2.layoutForKeyPad, keyPadCharacterRef = _this$props2.keyPadCharacterRef, latex = _this$props2.latex, onChange = _this$props2.onChange, onDone = _this$props2.onDone, onFocus = _this$props2.onFocus, onBlur = _this$props2.onBlur, hideDoneButton = _this$props2.hideDoneButton, hideDoneButtonBackground = _this$props2.hideDoneButtonBackground, classes = _this$props2.classes, error = _this$props2.error, maxResponseAreas = _this$props2.maxResponseAreas;
         return _react["default"].createElement("div", {
-          className: (0, _classnames["default"])(classes.pureToolbar, (classNames || ({})).toolbar)
+          className: (0, _classnames["default"])(classes.pureToolbar, (classNames || ({})).toolbar),
+          ref: keyPadCharacterRef
         }, _react["default"].createElement("div", null), _react["default"].createElement(_editorAndPad["default"], {
           autoFocus: autoFocus,
           keypadMode: keypadMode,
@@ -141041,10 +141043,11 @@ var _Check = _interopRequireDefault$1T(Check);
 var _styles$4 = styles$1J;
 var _propTypes$16 = _interopRequireDefault$1T(require$$5$P);
 var RawDoneButton = function RawDoneButton(_ref) {
-  var classes = _ref.classes, onClick = _ref.onClick;
+  var classes = _ref.classes, onClick = _ref.onClick, doneButtonRef = _ref.doneButtonRef;
   return _react$1y["default"].createElement(_IconButton$2["default"], {
     "aria-label": "Done",
     className: classes.iconRoot,
+    buttonRef: doneButtonRef,
     onClick: onClick,
     classes: {
       label: classes.label,
@@ -141222,7 +141225,7 @@ const require$$10$q = _dll_debug;
     };
   };
   var DefaultToolbar = function DefaultToolbar(_ref) {
-    var plugins = _ref.plugins, pluginProps = _ref.pluginProps, value = _ref.value, onChange = _ref.onChange, getFocusedValue = _ref.getFocusedValue, onDone = _ref.onDone, classes = _ref.classes, showDone = _ref.showDone, deletable = _ref.deletable, isHtmlMode = _ref.isHtmlMode, onBlur = _ref.onBlur, onFocus = _ref.onFocus;
+    var plugins = _ref.plugins, pluginProps = _ref.pluginProps, value = _ref.value, onChange = _ref.onChange, getFocusedValue = _ref.getFocusedValue, onDone = _ref.onDone, classes = _ref.classes, showDone = _ref.showDone, deletable = _ref.deletable, isHtmlMode = _ref.isHtmlMode, doneButtonRef = _ref.doneButtonRef, onBlur = _ref.onBlur, onFocus = _ref.onFocus;
     pluginProps = _objectSpread({
       html: {
         disabled: true
@@ -141255,6 +141258,7 @@ const require$$10$q = _dll_debug;
         getFocusedValue: getFocusedValue
       }));
     })), showDone && !deletable && _react["default"].createElement(_doneButton.DoneButton, {
+      doneButtonRef: doneButtonRef,
       onClick: onDone
     }));
   };
@@ -148074,6 +148078,7 @@ const require$$11$l = _dll_prop_types;
       }
     };
     var el = _react["default"].createElement(_mathToolbar.PureToolbar, {
+      keyPadCharacterRef: opts.keyPadCharacterRef,
       autoFocus: true,
       noDecimal: true,
       hideInput: true,
@@ -148401,7 +148406,7 @@ const {debounce: require$$16$2} = _dll_lodash;
       key: "render",
       value: function render() {
         var _this2 = this, _classNames;
-        var _this$props3 = this.props, classes = _this$props3.classes, plugins = _this$props3.plugins, pluginProps = _this$props3.pluginProps, toolbarOpts = _this$props3.toolbarOpts, value = _this$props3.value, autoWidth = _this$props3.autoWidth, onChange = _this$props3.onChange, getFocusedValue = _this$props3.getFocusedValue, isFocused = _this$props3.isFocused, onDone = _this$props3.onDone, toolbarRef = _this$props3.toolbarRef, onBlur = _this$props3.onBlur, onFocus = _this$props3.onFocus;
+        var _this$props3 = this.props, classes = _this$props3.classes, plugins = _this$props3.plugins, pluginProps = _this$props3.pluginProps, toolbarOpts = _this$props3.toolbarOpts, value = _this$props3.value, autoWidth = _this$props3.autoWidth, onChange = _this$props3.onChange, getFocusedValue = _this$props3.getFocusedValue, isFocused = _this$props3.isFocused, onDone = _this$props3.onDone, toolbarRef = _this$props3.toolbarRef, doneButtonRef = _this$props3.doneButtonRef, onBlur = _this$props3.onBlur, onFocus = _this$props3.onFocus;
         var node = (0, _utils.findSingleNode)(value);
         var parentNode = (0, _utils.findParentNode)(value, node);
         log(' --------------> [render] node: ', node);
@@ -148470,6 +148475,7 @@ const {debounce: require$$16$2} = _dll_lodash;
           deletable: deletable,
           isHtmlMode: toolbarOpts.isHtmlMode,
           onFocus: onFocus,
+          doneButtonRef: doneButtonRef,
           onBlur: onBlur
         }), _react["default"].createElement("div", {
           className: classes.shared
@@ -148483,6 +148489,7 @@ const {debounce: require$$16$2} = _dll_lodash;
             root: classes.iconRoot
           }
         }, _react["default"].createElement(_Delete["default"], null)), customToolbarShowDone && _react["default"].createElement(_doneButton.DoneButton, {
+          doneButtonRef: doneButtonRef,
           onClick: handleDone
         })));
       }
@@ -148632,7 +148639,7 @@ const require$$13$5 = _dll_prop_types;
       key: "render",
       value: function render() {
         var _classNames, _this = this, _classNames2;
-        var _this$props = this.props, classes = _this$props.classes, children = _this$props.children, value = _this$props.value, plugins = _this$props.plugins, onChange = _this$props.onChange, getFocusedValue = _this$props.getFocusedValue, onDone = _this$props.onDone, focusedNode = _this$props.focusedNode, autoWidth = _this$props.autoWidth, readOnly = _this$props.readOnly, disableScrollbar = _this$props.disableScrollbar, disableUnderline = _this$props.disableUnderline, pluginProps = _this$props.pluginProps, toolbarOpts = _this$props.toolbarOpts, onDataChange = _this$props.onDataChange, toolbarRef = _this$props.toolbarRef, focusToolbar = _this$props.focusToolbar, onToolbarFocus = _this$props.onToolbarFocus, onToolbarBlur = _this$props.onToolbarBlur;
+        var _this$props = this.props, classes = _this$props.classes, children = _this$props.children, value = _this$props.value, plugins = _this$props.plugins, onChange = _this$props.onChange, getFocusedValue = _this$props.getFocusedValue, onDone = _this$props.onDone, focusedNode = _this$props.focusedNode, autoWidth = _this$props.autoWidth, readOnly = _this$props.readOnly, disableScrollbar = _this$props.disableScrollbar, disableUnderline = _this$props.disableUnderline, pluginProps = _this$props.pluginProps, toolbarOpts = _this$props.toolbarOpts, onDataChange = _this$props.onDataChange, toolbarRef = _this$props.toolbarRef, doneButtonRef = _this$props.doneButtonRef, focusToolbar = _this$props.focusToolbar, onToolbarFocus = _this$props.onToolbarFocus, onToolbarBlur = _this$props.onToolbarBlur;
         var inFocus = value.isFocused || focusedNode !== null && focusedNode !== undefined || focusToolbar;
         var holderNames = (0, _classnames["default"])(classes.editorHolder, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.editorInFocus, inFocus), (0, _defineProperty2["default"])(_classNames, classes.readOnly, readOnly), (0, _defineProperty2["default"])(_classNames, classes.disabledUnderline, disableUnderline), (0, _defineProperty2["default"])(_classNames, classes.disabledScrollbar, disableScrollbar), _classNames));
         var clonedChildren = children;
@@ -148663,6 +148670,7 @@ const require$$13$5 = _dll_prop_types;
           onDone: onDone,
           onDataChange: onDataChange,
           toolbarRef: toolbarRef,
+          doneButtonRef: doneButtonRef,
           pluginProps: pluginProps,
           toolbarOpts: toolbarOpts
         }));
@@ -149323,7 +149331,9 @@ var buildPlugins = function buildPlugins(activePlugins, customPlugins, opts) {
   var mathPlugin = (0, _math["default"])(opts.math);
   var respAreaPlugin = opts.responseArea && opts.responseArea.type && (0, _respArea["default"])(opts.responseArea, (0, _compact["default"])([mathPlugin]));
   var languageCharactersPlugins = ((opts === null || opts === void 0 ? void 0 : opts.languageCharacters) || []).map(function (config) {
-    return (0, _characters["default"])(config);
+    return (0, _characters["default"])(_objectSpread$4(_objectSpread$4({}, config), {}, {
+      keyPadCharacterRef: opts.keyPadCharacterRef
+    }));
   });
   var tablePlugins = [imagePlugin, mathPlugin, respAreaPlugin].concat((0, _toConsumableArray2$2["default"])(languageCharactersPlugins));
   if (opts.responseArea && opts.responseArea.type === 'math-templated') {
@@ -157899,6 +157909,7 @@ const require$$23 = _dll_classnames;
             }
           },
           languageCharacters: props.languageCharactersProps,
+          keyPadCharacterRef: _this.keyPadCharacterRef,
           media: {
             focus: _this.focus,
             createChange: function createChange() {
@@ -158034,10 +158045,13 @@ const require$$23 = _dll_classnames;
         }
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (event) {
+        var _this$keyPadCharacter;
         log('[onBlur]');
         var relatedTarget = event.relatedTarget;
         var toolbarElement = _this.toolbarRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest(("[class*=\"").concat(_this.toolbarRef.className, "\"]")));
-        var isRawDoneButton = relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest('button[class*="RawDoneButton"]');
+        var isRawDoneButton = _this.doneButtonRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest(("[class*=\"").concat(_this.doneButtonRef.className, "\"]")));
+        var isKeyPadCharacterButton = _this.keyPadCharacterRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest(("[class*=\"").concat((_this$keyPadCharacter = _this.keyPadCharacterRef.current) === null || _this$keyPadCharacter === void 0 ? void 0 : _this$keyPadCharacter.className, "\"]")));
+        _this.skipBlurHandling = isKeyPadCharacterButton ? true : false;
         if (toolbarElement && !isRawDoneButton) {
           _this.setState({
             focusToolbar: true
@@ -158046,10 +158060,12 @@ const require$$23 = _dll_classnames;
         var node = relatedTarget ? (0, _slateReact.findNode)(relatedTarget, _this.state.value) : null;
         log('[onBlur] node: ', node);
         return new Promise(function (resolve) {
-          _this.setState({
-            preBlurValue: _this.state.value,
-            focusedNode: !node ? null : node
-          }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
+          if (!_this.skipBlurHandling) {
+            _this.setState({
+              preBlurValue: _this.state.value,
+              focusedNode: !node ? null : node
+            }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
+          }
           _this.props.onBlur(event);
         });
       });
@@ -158343,6 +158359,7 @@ const require$$23 = _dll_classnames;
           open: false
         }
       };
+      _this.keyPadCharacterRef = _react["default"].createRef();
       _this.toggleHtmlMode = _this.toggleHtmlMode.bind((0, _assertThisInitialized2["default"])(_this));
       _this.handleToolbarFocus = _this.handleToolbarFocus.bind((0, _assertThisInitialized2["default"])(_this));
       _this.handleToolbarBlur = _this.handleToolbarBlur.bind((0, _assertThisInitialized2["default"])(_this));
@@ -158499,6 +158516,11 @@ const require$$23 = _dll_classnames;
               _this4.toolbarRef = r;
             }
           },
+          doneButtonRef: function doneButtonRef(r) {
+            if (r) {
+              _this4.doneButtonRef = r;
+            }
+          },
           value: value,
           focusToolbar: this.state.focusToolbar,
           onToolbarFocus: this.handleToolbarFocus,

package/module/element.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.22.1/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.22.2/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.23.1/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
@@ -127405,7 +127405,7 @@ const require$$10$x = _dll_classnames;
       key: "render",
       value: function render() {
         var latex = this.state.latex;
-        var _this$props = this.props, classNames = _this$props.classNames, autoFocus = _this$props.autoFocus, allowAnswerBlock = _this$props.allowAnswerBlock, onAnswerBlockAdd = _this$props.onAnswerBlockAdd, controlledKeypad = _this$props.controlledKeypad, controlledKeypadMode = _this$props.controlledKeypadMode, keypadMode = _this$props.keypadMode, noDecimal = _this$props.noDecimal, additionalKeys = _this$props.additionalKeys, showKeypad = _this$props.showKeypad, onFocus = _this$props.onFocus, onBlur = _this$props.onBlur, hideDoneButton = _this$props.hideDoneButton, error = _this$props.error, maxResponseAreas = _this$props.maxResponseAreas;
+        var _this$props = this.props, classNames = _this$props.classNames, autoFocus = _this$props.autoFocus, allowAnswerBlock = _this$props.allowAnswerBlock, onAnswerBlockAdd = _this$props.onAnswerBlockAdd, controlledKeypad = _this$props.controlledKeypad, controlledKeypadMode = _this$props.controlledKeypadMode, keypadMode = _this$props.keypadMode, noDecimal = _this$props.noDecimal, additionalKeys = _this$props.additionalKeys, showKeypad = _this$props.showKeypad, onFocus = _this$props.onFocus, onBlur = _this$props.onBlur, hideDoneButton = _this$props.hideDoneButton, error = _this$props.error, keyPadCharacterRef = _this$props.keyPadCharacterRef, maxResponseAreas = _this$props.maxResponseAreas;
         return _react["default"].createElement(PureToolbar, {
           autoFocus: autoFocus,
           classNames: classNames,
@@ -127415,6 +127415,7 @@ const require$$10$x = _dll_classnames;
           additionalKeys: additionalKeys,
           noDecimal: noDecimal,
           keypadMode: keypadMode,
+          keyPadCharacterRef: keyPadCharacterRef,
           onChange: this.onChange,
           onDone: this.done,
           onFocus: onFocus,
@@ -127476,9 +127477,10 @@ const require$$10$x = _dll_classnames;
     (0, _createClass2["default"])(RawPureToolbar, [{
       key: "render",
       value: function render() {
-        var _this$props2 = this.props, classNames = _this$props2.classNames, autoFocus = _this$props2.autoFocus, allowAnswerBlock = _this$props2.allowAnswerBlock, onAnswerBlockAdd = _this$props2.onAnswerBlockAdd, controlledKeypad = _this$props2.controlledKeypad, controlledKeypadMode = _this$props2.controlledKeypadMode, additionalKeys = _this$props2.additionalKeys, showKeypad = _this$props2.showKeypad, keypadMode = _this$props2.keypadMode, noDecimal = _this$props2.noDecimal, hideInput = _this$props2.hideInput, noLatexHandling = _this$props2.noLatexHandling, layoutForKeyPad = _this$props2.layoutForKeyPad, latex = _this$props2.latex, onChange = _this$props2.onChange, onDone = _this$props2.onDone, onFocus = _this$props2.onFocus, onBlur = _this$props2.onBlur, hideDoneButton = _this$props2.hideDoneButton, hideDoneButtonBackground = _this$props2.hideDoneButtonBackground, classes = _this$props2.classes, error = _this$props2.error, maxResponseAreas = _this$props2.maxResponseAreas;
+        var _this$props2 = this.props, classNames = _this$props2.classNames, autoFocus = _this$props2.autoFocus, allowAnswerBlock = _this$props2.allowAnswerBlock, onAnswerBlockAdd = _this$props2.onAnswerBlockAdd, controlledKeypad = _this$props2.controlledKeypad, controlledKeypadMode = _this$props2.controlledKeypadMode, additionalKeys = _this$props2.additionalKeys, showKeypad = _this$props2.showKeypad, keypadMode = _this$props2.keypadMode, noDecimal = _this$props2.noDecimal, hideInput = _this$props2.hideInput, noLatexHandling = _this$props2.noLatexHandling, layoutForKeyPad = _this$props2.layoutForKeyPad, keyPadCharacterRef = _this$props2.keyPadCharacterRef, latex = _this$props2.latex, onChange = _this$props2.onChange, onDone = _this$props2.onDone, onFocus = _this$props2.onFocus, onBlur = _this$props2.onBlur, hideDoneButton = _this$props2.hideDoneButton, hideDoneButtonBackground = _this$props2.hideDoneButtonBackground, classes = _this$props2.classes, error = _this$props2.error, maxResponseAreas = _this$props2.maxResponseAreas;
         return _react["default"].createElement("div", {
-          className: (0, _classnames["default"])(classes.pureToolbar, (classNames || ({})).toolbar)
+          className: (0, _classnames["default"])(classes.pureToolbar, (classNames || ({})).toolbar),
+          ref: keyPadCharacterRef
         }, _react["default"].createElement("div", null), _react["default"].createElement(_editorAndPad["default"], {
           autoFocus: autoFocus,
           keypadMode: keypadMode,
@@ -131220,10 +131222,11 @@ var _Check = _interopRequireDefault$1U(Check);
 var _styles$4 = styles$1K;
 var _propTypes$15 = _interopRequireDefault$1U(require$$5$O);
 var RawDoneButton = function RawDoneButton(_ref) {
-  var classes = _ref.classes, onClick = _ref.onClick;
+  var classes = _ref.classes, onClick = _ref.onClick, doneButtonRef = _ref.doneButtonRef;
   return _react$1z["default"].createElement(_IconButton$2["default"], {
     "aria-label": "Done",
     className: classes.iconRoot,
+    buttonRef: doneButtonRef,
     onClick: onClick,
     classes: {
       label: classes.label,
@@ -131401,7 +131404,7 @@ const require$$10$r = _dll_debug;
     };
   };
   var DefaultToolbar = function DefaultToolbar(_ref) {
-    var plugins = _ref.plugins, pluginProps = _ref.pluginProps, value = _ref.value, onChange = _ref.onChange, getFocusedValue = _ref.getFocusedValue, onDone = _ref.onDone, classes = _ref.classes, showDone = _ref.showDone, deletable = _ref.deletable, isHtmlMode = _ref.isHtmlMode, onBlur = _ref.onBlur, onFocus = _ref.onFocus;
+    var plugins = _ref.plugins, pluginProps = _ref.pluginProps, value = _ref.value, onChange = _ref.onChange, getFocusedValue = _ref.getFocusedValue, onDone = _ref.onDone, classes = _ref.classes, showDone = _ref.showDone, deletable = _ref.deletable, isHtmlMode = _ref.isHtmlMode, doneButtonRef = _ref.doneButtonRef, onBlur = _ref.onBlur, onFocus = _ref.onFocus;
     pluginProps = _objectSpread({
       html: {
         disabled: true
@@ -131434,6 +131437,7 @@ const require$$10$r = _dll_debug;
         getFocusedValue: getFocusedValue
       }));
     })), showDone && !deletable && _react["default"].createElement(_doneButton.DoneButton, {
+      doneButtonRef: doneButtonRef,
       onClick: onDone
     }));
   };
@@ -146334,6 +146338,7 @@ const require$$11$l = _dll_prop_types;
       }
     };
     var el = _react["default"].createElement(_mathToolbar.PureToolbar, {
+      keyPadCharacterRef: opts.keyPadCharacterRef,
       autoFocus: true,
       noDecimal: true,
       hideInput: true,
@@ -146661,7 +146666,7 @@ const {debounce: require$$16$2} = _dll_lodash;
       key: "render",
       value: function render() {
         var _this2 = this, _classNames;
-        var _this$props3 = this.props, classes = _this$props3.classes, plugins = _this$props3.plugins, pluginProps = _this$props3.pluginProps, toolbarOpts = _this$props3.toolbarOpts, value = _this$props3.value, autoWidth = _this$props3.autoWidth, onChange = _this$props3.onChange, getFocusedValue = _this$props3.getFocusedValue, isFocused = _this$props3.isFocused, onDone = _this$props3.onDone, toolbarRef = _this$props3.toolbarRef, onBlur = _this$props3.onBlur, onFocus = _this$props3.onFocus;
+        var _this$props3 = this.props, classes = _this$props3.classes, plugins = _this$props3.plugins, pluginProps = _this$props3.pluginProps, toolbarOpts = _this$props3.toolbarOpts, value = _this$props3.value, autoWidth = _this$props3.autoWidth, onChange = _this$props3.onChange, getFocusedValue = _this$props3.getFocusedValue, isFocused = _this$props3.isFocused, onDone = _this$props3.onDone, toolbarRef = _this$props3.toolbarRef, doneButtonRef = _this$props3.doneButtonRef, onBlur = _this$props3.onBlur, onFocus = _this$props3.onFocus;
         var node = (0, _utils.findSingleNode)(value);
         var parentNode = (0, _utils.findParentNode)(value, node);
         log(' --------------> [render] node: ', node);
@@ -146730,6 +146735,7 @@ const {debounce: require$$16$2} = _dll_lodash;
           deletable: deletable,
           isHtmlMode: toolbarOpts.isHtmlMode,
           onFocus: onFocus,
+          doneButtonRef: doneButtonRef,
           onBlur: onBlur
         }), _react["default"].createElement("div", {
           className: classes.shared
@@ -146743,6 +146749,7 @@ const {debounce: require$$16$2} = _dll_lodash;
             root: classes.iconRoot
           }
         }, _react["default"].createElement(_Delete["default"], null)), customToolbarShowDone && _react["default"].createElement(_doneButton.DoneButton, {
+          doneButtonRef: doneButtonRef,
           onClick: handleDone
         })));
       }
@@ -146892,7 +146899,7 @@ const require$$13$5 = _dll_prop_types;
       key: "render",
       value: function render() {
         var _classNames, _this = this, _classNames2;
-        var _this$props = this.props, classes = _this$props.classes, children = _this$props.children, value = _this$props.value, plugins = _this$props.plugins, onChange = _this$props.onChange, getFocusedValue = _this$props.getFocusedValue, onDone = _this$props.onDone, focusedNode = _this$props.focusedNode, autoWidth = _this$props.autoWidth, readOnly = _this$props.readOnly, disableScrollbar = _this$props.disableScrollbar, disableUnderline = _this$props.disableUnderline, pluginProps = _this$props.pluginProps, toolbarOpts = _this$props.toolbarOpts, onDataChange = _this$props.onDataChange, toolbarRef = _this$props.toolbarRef, focusToolbar = _this$props.focusToolbar, onToolbarFocus = _this$props.onToolbarFocus, onToolbarBlur = _this$props.onToolbarBlur;
+        var _this$props = this.props, classes = _this$props.classes, children = _this$props.children, value = _this$props.value, plugins = _this$props.plugins, onChange = _this$props.onChange, getFocusedValue = _this$props.getFocusedValue, onDone = _this$props.onDone, focusedNode = _this$props.focusedNode, autoWidth = _this$props.autoWidth, readOnly = _this$props.readOnly, disableScrollbar = _this$props.disableScrollbar, disableUnderline = _this$props.disableUnderline, pluginProps = _this$props.pluginProps, toolbarOpts = _this$props.toolbarOpts, onDataChange = _this$props.onDataChange, toolbarRef = _this$props.toolbarRef, doneButtonRef = _this$props.doneButtonRef, focusToolbar = _this$props.focusToolbar, onToolbarFocus = _this$props.onToolbarFocus, onToolbarBlur = _this$props.onToolbarBlur;
         var inFocus = value.isFocused || focusedNode !== null && focusedNode !== undefined || focusToolbar;
         var holderNames = (0, _classnames["default"])(classes.editorHolder, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.editorInFocus, inFocus), (0, _defineProperty2["default"])(_classNames, classes.readOnly, readOnly), (0, _defineProperty2["default"])(_classNames, classes.disabledUnderline, disableUnderline), (0, _defineProperty2["default"])(_classNames, classes.disabledScrollbar, disableScrollbar), _classNames));
         var clonedChildren = children;
@@ -146923,6 +146930,7 @@ const require$$13$5 = _dll_prop_types;
           onDone: onDone,
           onDataChange: onDataChange,
           toolbarRef: toolbarRef,
+          doneButtonRef: doneButtonRef,
           pluginProps: pluginProps,
           toolbarOpts: toolbarOpts
         }));
@@ -147583,7 +147591,9 @@ var buildPlugins = function buildPlugins(activePlugins, customPlugins, opts) {
   var mathPlugin = (0, _math["default"])(opts.math);
   var respAreaPlugin = opts.responseArea && opts.responseArea.type && (0, _respArea["default"])(opts.responseArea, (0, _compact["default"])([mathPlugin]));
   var languageCharactersPlugins = ((opts === null || opts === void 0 ? void 0 : opts.languageCharacters) || []).map(function (config) {
-    return (0, _characters["default"])(config);
+    return (0, _characters["default"])(_objectSpread$4(_objectSpread$4({}, config), {}, {
+      keyPadCharacterRef: opts.keyPadCharacterRef
+    }));
   });
   var tablePlugins = [imagePlugin, mathPlugin, respAreaPlugin].concat((0, _toConsumableArray2$2["default"])(languageCharactersPlugins));
   if (opts.responseArea && opts.responseArea.type === 'math-templated') {
@@ -155964,6 +155974,7 @@ const require$$23 = _dll_classnames;
             }
           },
           languageCharacters: props.languageCharactersProps,
+          keyPadCharacterRef: _this.keyPadCharacterRef,
           media: {
             focus: _this.focus,
             createChange: function createChange() {
@@ -156099,10 +156110,13 @@ const require$$23 = _dll_classnames;
         }
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (event) {
+        var _this$keyPadCharacter;
         log('[onBlur]');
         var relatedTarget = event.relatedTarget;
         var toolbarElement = _this.toolbarRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest(("[class*=\"").concat(_this.toolbarRef.className, "\"]")));
-        var isRawDoneButton = relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest('button[class*="RawDoneButton"]');
+        var isRawDoneButton = _this.doneButtonRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest(("[class*=\"").concat(_this.doneButtonRef.className, "\"]")));
+        var isKeyPadCharacterButton = _this.keyPadCharacterRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest(("[class*=\"").concat((_this$keyPadCharacter = _this.keyPadCharacterRef.current) === null || _this$keyPadCharacter === void 0 ? void 0 : _this$keyPadCharacter.className, "\"]")));
+        _this.skipBlurHandling = isKeyPadCharacterButton ? true : false;
         if (toolbarElement && !isRawDoneButton) {
           _this.setState({
             focusToolbar: true
@@ -156111,10 +156125,12 @@ const require$$23 = _dll_classnames;
         var node = relatedTarget ? (0, _slateReact.findNode)(relatedTarget, _this.state.value) : null;
         log('[onBlur] node: ', node);
         return new Promise(function (resolve) {
-          _this.setState({
-            preBlurValue: _this.state.value,
-            focusedNode: !node ? null : node
-          }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
+          if (!_this.skipBlurHandling) {
+            _this.setState({
+              preBlurValue: _this.state.value,
+              focusedNode: !node ? null : node
+            }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
+          }
           _this.props.onBlur(event);
         });
       });
@@ -156408,6 +156424,7 @@ const require$$23 = _dll_classnames;
           open: false
         }
       };
+      _this.keyPadCharacterRef = _react["default"].createRef();
       _this.toggleHtmlMode = _this.toggleHtmlMode.bind((0, _assertThisInitialized2["default"])(_this));
       _this.handleToolbarFocus = _this.handleToolbarFocus.bind((0, _assertThisInitialized2["default"])(_this));
       _this.handleToolbarBlur = _this.handleToolbarBlur.bind((0, _assertThisInitialized2["default"])(_this));
@@ -156564,6 +156581,11 @@ const require$$23 = _dll_classnames;
               _this4.toolbarRef = r;
             }
           },
+          doneButtonRef: function doneButtonRef(r) {
+            if (r) {
+              _this4.doneButtonRef = r;
+            }
+          },
           value: value,
           focusToolbar: this.state.focusToolbar,
           onToolbarFocus: this.handleToolbarFocus,

package/module/manifest.json

@@ -4,7 +4,7 @@
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "1.22.1"
+      "version": "1.22.2"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",

package/module/print.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.22.1/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.22.2/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.23.1/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
@@ -127405,7 +127405,7 @@ const require$$10$x = _dll_classnames;
       key: "render",
       value: function render() {
         var latex = this.state.latex;
-        var _this$props = this.props, classNames = _this$props.classNames, autoFocus = _this$props.autoFocus, allowAnswerBlock = _this$props.allowAnswerBlock, onAnswerBlockAdd = _this$props.onAnswerBlockAdd, controlledKeypad = _this$props.controlledKeypad, controlledKeypadMode = _this$props.controlledKeypadMode, keypadMode = _this$props.keypadMode, noDecimal = _this$props.noDecimal, additionalKeys = _this$props.additionalKeys, showKeypad = _this$props.showKeypad, onFocus = _this$props.onFocus, onBlur = _this$props.onBlur, hideDoneButton = _this$props.hideDoneButton, error = _this$props.error, maxResponseAreas = _this$props.maxResponseAreas;
+        var _this$props = this.props, classNames = _this$props.classNames, autoFocus = _this$props.autoFocus, allowAnswerBlock = _this$props.allowAnswerBlock, onAnswerBlockAdd = _this$props.onAnswerBlockAdd, controlledKeypad = _this$props.controlledKeypad, controlledKeypadMode = _this$props.controlledKeypadMode, keypadMode = _this$props.keypadMode, noDecimal = _this$props.noDecimal, additionalKeys = _this$props.additionalKeys, showKeypad = _this$props.showKeypad, onFocus = _this$props.onFocus, onBlur = _this$props.onBlur, hideDoneButton = _this$props.hideDoneButton, error = _this$props.error, keyPadCharacterRef = _this$props.keyPadCharacterRef, maxResponseAreas = _this$props.maxResponseAreas;
         return _react["default"].createElement(PureToolbar, {
           autoFocus: autoFocus,
           classNames: classNames,
@@ -127415,6 +127415,7 @@ const require$$10$x = _dll_classnames;
           additionalKeys: additionalKeys,
           noDecimal: noDecimal,
           keypadMode: keypadMode,
+          keyPadCharacterRef: keyPadCharacterRef,
           onChange: this.onChange,
           onDone: this.done,
           onFocus: onFocus,
@@ -127476,9 +127477,10 @@ const require$$10$x = _dll_classnames;
     (0, _createClass2["default"])(RawPureToolbar, [{
       key: "render",
       value: function render() {
-        var _this$props2 = this.props, classNames = _this$props2.classNames, autoFocus = _this$props2.autoFocus, allowAnswerBlock = _this$props2.allowAnswerBlock, onAnswerBlockAdd = _this$props2.onAnswerBlockAdd, controlledKeypad = _this$props2.controlledKeypad, controlledKeypadMode = _this$props2.controlledKeypadMode, additionalKeys = _this$props2.additionalKeys, showKeypad = _this$props2.showKeypad, keypadMode = _this$props2.keypadMode, noDecimal = _this$props2.noDecimal, hideInput = _this$props2.hideInput, noLatexHandling = _this$props2.noLatexHandling, layoutForKeyPad = _this$props2.layoutForKeyPad, latex = _this$props2.latex, onChange = _this$props2.onChange, onDone = _this$props2.onDone, onFocus = _this$props2.onFocus, onBlur = _this$props2.onBlur, hideDoneButton = _this$props2.hideDoneButton, hideDoneButtonBackground = _this$props2.hideDoneButtonBackground, classes = _this$props2.classes, error = _this$props2.error, maxResponseAreas = _this$props2.maxResponseAreas;
+        var _this$props2 = this.props, classNames = _this$props2.classNames, autoFocus = _this$props2.autoFocus, allowAnswerBlock = _this$props2.allowAnswerBlock, onAnswerBlockAdd = _this$props2.onAnswerBlockAdd, controlledKeypad = _this$props2.controlledKeypad, controlledKeypadMode = _this$props2.controlledKeypadMode, additionalKeys = _this$props2.additionalKeys, showKeypad = _this$props2.showKeypad, keypadMode = _this$props2.keypadMode, noDecimal = _this$props2.noDecimal, hideInput = _this$props2.hideInput, noLatexHandling = _this$props2.noLatexHandling, layoutForKeyPad = _this$props2.layoutForKeyPad, keyPadCharacterRef = _this$props2.keyPadCharacterRef, latex = _this$props2.latex, onChange = _this$props2.onChange, onDone = _this$props2.onDone, onFocus = _this$props2.onFocus, onBlur = _this$props2.onBlur, hideDoneButton = _this$props2.hideDoneButton, hideDoneButtonBackground = _this$props2.hideDoneButtonBackground, classes = _this$props2.classes, error = _this$props2.error, maxResponseAreas = _this$props2.maxResponseAreas;
         return _react["default"].createElement("div", {
-          className: (0, _classnames["default"])(classes.pureToolbar, (classNames || ({})).toolbar)
+          className: (0, _classnames["default"])(classes.pureToolbar, (classNames || ({})).toolbar),
+          ref: keyPadCharacterRef
         }, _react["default"].createElement("div", null), _react["default"].createElement(_editorAndPad["default"], {
           autoFocus: autoFocus,
           keypadMode: keypadMode,
@@ -131220,10 +131222,11 @@ var _Check = _interopRequireDefault$1U(Check);
 var _styles$4 = styles$1K;
 var _propTypes$15 = _interopRequireDefault$1U(require$$5$O);
 var RawDoneButton = function RawDoneButton(_ref) {
-  var classes = _ref.classes, onClick = _ref.onClick;
+  var classes = _ref.classes, onClick = _ref.onClick, doneButtonRef = _ref.doneButtonRef;
   return _react$1z["default"].createElement(_IconButton$2["default"], {
     "aria-label": "Done",
     className: classes.iconRoot,
+    buttonRef: doneButtonRef,
     onClick: onClick,
     classes: {
       label: classes.label,
@@ -131401,7 +131404,7 @@ const require$$10$r = _dll_debug;
     };
   };
   var DefaultToolbar = function DefaultToolbar(_ref) {
-    var plugins = _ref.plugins, pluginProps = _ref.pluginProps, value = _ref.value, onChange = _ref.onChange, getFocusedValue = _ref.getFocusedValue, onDone = _ref.onDone, classes = _ref.classes, showDone = _ref.showDone, deletable = _ref.deletable, isHtmlMode = _ref.isHtmlMode, onBlur = _ref.onBlur, onFocus = _ref.onFocus;
+    var plugins = _ref.plugins, pluginProps = _ref.pluginProps, value = _ref.value, onChange = _ref.onChange, getFocusedValue = _ref.getFocusedValue, onDone = _ref.onDone, classes = _ref.classes, showDone = _ref.showDone, deletable = _ref.deletable, isHtmlMode = _ref.isHtmlMode, doneButtonRef = _ref.doneButtonRef, onBlur = _ref.onBlur, onFocus = _ref.onFocus;
     pluginProps = _objectSpread({
       html: {
         disabled: true
@@ -131434,6 +131437,7 @@ const require$$10$r = _dll_debug;
         getFocusedValue: getFocusedValue
       }));
     })), showDone && !deletable && _react["default"].createElement(_doneButton.DoneButton, {
+      doneButtonRef: doneButtonRef,
       onClick: onDone
     }));
   };
@@ -146334,6 +146338,7 @@ const require$$11$l = _dll_prop_types;
       }
     };
     var el = _react["default"].createElement(_mathToolbar.PureToolbar, {
+      keyPadCharacterRef: opts.keyPadCharacterRef,
       autoFocus: true,
       noDecimal: true,
       hideInput: true,
@@ -146661,7 +146666,7 @@ const {debounce: require$$16$2} = _dll_lodash;
       key: "render",
       value: function render() {
         var _this2 = this, _classNames;
-        var _this$props3 = this.props, classes = _this$props3.classes, plugins = _this$props3.plugins, pluginProps = _this$props3.pluginProps, toolbarOpts = _this$props3.toolbarOpts, value = _this$props3.value, autoWidth = _this$props3.autoWidth, onChange = _this$props3.onChange, getFocusedValue = _this$props3.getFocusedValue, isFocused = _this$props3.isFocused, onDone = _this$props3.onDone, toolbarRef = _this$props3.toolbarRef, onBlur = _this$props3.onBlur, onFocus = _this$props3.onFocus;
+        var _this$props3 = this.props, classes = _this$props3.classes, plugins = _this$props3.plugins, pluginProps = _this$props3.pluginProps, toolbarOpts = _this$props3.toolbarOpts, value = _this$props3.value, autoWidth = _this$props3.autoWidth, onChange = _this$props3.onChange, getFocusedValue = _this$props3.getFocusedValue, isFocused = _this$props3.isFocused, onDone = _this$props3.onDone, toolbarRef = _this$props3.toolbarRef, doneButtonRef = _this$props3.doneButtonRef, onBlur = _this$props3.onBlur, onFocus = _this$props3.onFocus;
         var node = (0, _utils.findSingleNode)(value);
         var parentNode = (0, _utils.findParentNode)(value, node);
         log(' --------------> [render] node: ', node);
@@ -146730,6 +146735,7 @@ const {debounce: require$$16$2} = _dll_lodash;
           deletable: deletable,
           isHtmlMode: toolbarOpts.isHtmlMode,
           onFocus: onFocus,
+          doneButtonRef: doneButtonRef,
           onBlur: onBlur
         }), _react["default"].createElement("div", {
           className: classes.shared
@@ -146743,6 +146749,7 @@ const {debounce: require$$16$2} = _dll_lodash;
             root: classes.iconRoot
           }
         }, _react["default"].createElement(_Delete["default"], null)), customToolbarShowDone && _react["default"].createElement(_doneButton.DoneButton, {
+          doneButtonRef: doneButtonRef,
           onClick: handleDone
         })));
       }
@@ -146892,7 +146899,7 @@ const require$$13$5 = _dll_prop_types;
       key: "render",
       value: function render() {
         var _classNames, _this = this, _classNames2;
-        var _this$props = this.props, classes = _this$props.classes, children = _this$props.children, value = _this$props.value, plugins = _this$props.plugins, onChange = _this$props.onChange, getFocusedValue = _this$props.getFocusedValue, onDone = _this$props.onDone, focusedNode = _this$props.focusedNode, autoWidth = _this$props.autoWidth, readOnly = _this$props.readOnly, disableScrollbar = _this$props.disableScrollbar, disableUnderline = _this$props.disableUnderline, pluginProps = _this$props.pluginProps, toolbarOpts = _this$props.toolbarOpts, onDataChange = _this$props.onDataChange, toolbarRef = _this$props.toolbarRef, focusToolbar = _this$props.focusToolbar, onToolbarFocus = _this$props.onToolbarFocus, onToolbarBlur = _this$props.onToolbarBlur;
+        var _this$props = this.props, classes = _this$props.classes, children = _this$props.children, value = _this$props.value, plugins = _this$props.plugins, onChange = _this$props.onChange, getFocusedValue = _this$props.getFocusedValue, onDone = _this$props.onDone, focusedNode = _this$props.focusedNode, autoWidth = _this$props.autoWidth, readOnly = _this$props.readOnly, disableScrollbar = _this$props.disableScrollbar, disableUnderline = _this$props.disableUnderline, pluginProps = _this$props.pluginProps, toolbarOpts = _this$props.toolbarOpts, onDataChange = _this$props.onDataChange, toolbarRef = _this$props.toolbarRef, doneButtonRef = _this$props.doneButtonRef, focusToolbar = _this$props.focusToolbar, onToolbarFocus = _this$props.onToolbarFocus, onToolbarBlur = _this$props.onToolbarBlur;
         var inFocus = value.isFocused || focusedNode !== null && focusedNode !== undefined || focusToolbar;
         var holderNames = (0, _classnames["default"])(classes.editorHolder, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.editorInFocus, inFocus), (0, _defineProperty2["default"])(_classNames, classes.readOnly, readOnly), (0, _defineProperty2["default"])(_classNames, classes.disabledUnderline, disableUnderline), (0, _defineProperty2["default"])(_classNames, classes.disabledScrollbar, disableScrollbar), _classNames));
         var clonedChildren = children;
@@ -146923,6 +146930,7 @@ const require$$13$5 = _dll_prop_types;
           onDone: onDone,
           onDataChange: onDataChange,
           toolbarRef: toolbarRef,
+          doneButtonRef: doneButtonRef,
           pluginProps: pluginProps,
           toolbarOpts: toolbarOpts
         }));
@@ -147583,7 +147591,9 @@ var buildPlugins = function buildPlugins(activePlugins, customPlugins, opts) {
   var mathPlugin = (0, _math["default"])(opts.math);
   var respAreaPlugin = opts.responseArea && opts.responseArea.type && (0, _respArea["default"])(opts.responseArea, (0, _compact["default"])([mathPlugin]));
   var languageCharactersPlugins = ((opts === null || opts === void 0 ? void 0 : opts.languageCharacters) || []).map(function (config) {
-    return (0, _characters["default"])(config);
+    return (0, _characters["default"])(_objectSpread$4(_objectSpread$4({}, config), {}, {
+      keyPadCharacterRef: opts.keyPadCharacterRef
+    }));
   });
   var tablePlugins = [imagePlugin, mathPlugin, respAreaPlugin].concat((0, _toConsumableArray2$2["default"])(languageCharactersPlugins));
   if (opts.responseArea && opts.responseArea.type === 'math-templated') {
@@ -155964,6 +155974,7 @@ const require$$23 = _dll_classnames;
             }
           },
           languageCharacters: props.languageCharactersProps,
+          keyPadCharacterRef: _this.keyPadCharacterRef,
           media: {
             focus: _this.focus,
             createChange: function createChange() {
@@ -156099,10 +156110,13 @@ const require$$23 = _dll_classnames;
         }
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (event) {
+        var _this$keyPadCharacter;
         log('[onBlur]');
         var relatedTarget = event.relatedTarget;
         var toolbarElement = _this.toolbarRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest(("[class*=\"").concat(_this.toolbarRef.className, "\"]")));
-        var isRawDoneButton = relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest('button[class*="RawDoneButton"]');
+        var isRawDoneButton = _this.doneButtonRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest(("[class*=\"").concat(_this.doneButtonRef.className, "\"]")));
+        var isKeyPadCharacterButton = _this.keyPadCharacterRef && (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.closest(("[class*=\"").concat((_this$keyPadCharacter = _this.keyPadCharacterRef.current) === null || _this$keyPadCharacter === void 0 ? void 0 : _this$keyPadCharacter.className, "\"]")));
+        _this.skipBlurHandling = isKeyPadCharacterButton ? true : false;
         if (toolbarElement && !isRawDoneButton) {
           _this.setState({
             focusToolbar: true
@@ -156111,10 +156125,12 @@ const require$$23 = _dll_classnames;
         var node = relatedTarget ? (0, _slateReact.findNode)(relatedTarget, _this.state.value) : null;
         log('[onBlur] node: ', node);
         return new Promise(function (resolve) {
-          _this.setState({
-            preBlurValue: _this.state.value,
-            focusedNode: !node ? null : node
-          }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
+          if (!_this.skipBlurHandling) {
+            _this.setState({
+              preBlurValue: _this.state.value,
+              focusedNode: !node ? null : node
+            }, _this.handleBlur.bind((0, _assertThisInitialized2["default"])(_this), resolve));
+          }
           _this.props.onBlur(event);
         });
       });
@@ -156408,6 +156424,7 @@ const require$$23 = _dll_classnames;
           open: false
         }
       };
+      _this.keyPadCharacterRef = _react["default"].createRef();
       _this.toggleHtmlMode = _this.toggleHtmlMode.bind((0, _assertThisInitialized2["default"])(_this));
       _this.handleToolbarFocus = _this.handleToolbarFocus.bind((0, _assertThisInitialized2["default"])(_this));
       _this.handleToolbarBlur = _this.handleToolbarBlur.bind((0, _assertThisInitialized2["default"])(_this));
@@ -156564,6 +156581,11 @@ const require$$23 = _dll_classnames;
               _this4.toolbarRef = r;
             }
           },
+          doneButtonRef: function doneButtonRef(r) {
+            if (r) {
+              _this4.doneButtonRef = r;
+            }
+          },
           value: value,
           focusToolbar: this.state.focusToolbar,
           onToolbarFocus: this.handleToolbarFocus,

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@pie-element/complex-rubric",
   "repository": "pie-framework/pie-elements",
-  "version": "2.18.3-next.0+8ec0f71c6",
+  "version": "2.18.3-next.4+07d6e8560",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multi-trait-rubric": "^3.18.3-next.0+8ec0f71c6",
-    "@pie-element/rubric": "^3.18.3-next.0+8ec0f71c6",
+    "@pie-element/multi-trait-rubric": "^3.18.3-next.4+07d6e8560",
+    "@pie-element/rubric": "^3.18.3-next.4+07d6e8560",
     "@pie-framework/pie-player-events": "^0.1.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2"
   },
-  "gitHead": "8ec0f71c62b7453d7f644422a71c0e71dd3b14d8",
+  "gitHead": "07d6e8560ddfe25f95dfbafc2d3155b93eb85404",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },