@pie-element/complex-rubric 2.18.3-next.3 → 2.18.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.18.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric@2.18.2...@pie-element/complex-rubric@2.18.3) (2024-08-22)
+
+
+### Bug Fixes
+
+* update pie-lib PD-4021 ([07d6e85](https://github.com/pie-framework/pie-elements/commit/07d6e8560ddfe25f95dfbafc2d3155b93eb85404))
+
+
+
+
+
 ## [2.18.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric@2.18.1...@pie-element/complex-rubric@2.18.2) (2024-08-19)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.42](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric-configure@2.2.41...@pie-element/complex-rubric-configure@2.2.42) (2024-08-22)
+
+**Note:** Version bump only for package @pie-element/complex-rubric-configure
+
+
+
+
+
 ## [2.2.41](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric-configure@2.2.40...@pie-element/complex-rubric-configure@2.2.41) (2024-08-19)
 
 **Note:** Version bump only for package @pie-element/complex-rubric-configure

package/configure/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@pie-element/complex-rubric-configure",
   "private": true,
-  "version": "2.2.41",
+  "version": "2.2.42",
   "description": "Complex Rubric authoring view",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "Pie Framework Authors",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multi-trait-rubric": "^3.18.2",
-    "@pie-element/rubric": "^3.18.2",
+    "@pie-element/multi-trait-rubric": "^3.18.3",
+    "@pie-element/rubric": "^3.18.3",
     "@pie-framework/pie-configure-events": "^1.3.0",
     "@pie-lib/config-ui": "^11.9.25-next.0",
     "@pie-lib/editable-html": "^11.1.2-next.0",

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.17.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric-controller@2.17.2...@pie-element/complex-rubric-controller@2.17.3) (2024-08-22)
+
+
+### Bug Fixes
+
+* update pie-lib PD-4021 ([07d6e85](https://github.com/pie-framework/pie-elements/commit/07d6e8560ddfe25f95dfbafc2d3155b93eb85404))
+
+
+
+
+
 ## [2.17.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric-controller@2.17.1...@pie-element/complex-rubric-controller@2.17.2) (2024-08-19)
 
 

package/controller/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/complex-rubric-controller",
   "private": true,
-  "version": "2.17.2",
+  "version": "2.17.3",
   "description": "",
   "scripts": {
     "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

@@ -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

@@ -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/print.js

@@ -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.3+c9da02b1f",
+  "version": "2.18.3",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multi-trait-rubric": "^3.18.3-next.3+c9da02b1f",
-    "@pie-element/rubric": "^3.18.3-next.3+c9da02b1f",
+    "@pie-element/multi-trait-rubric": "^3.18.3",
+    "@pie-element/rubric": "^3.18.3",
     "@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": "c9da02b1ffe02fc1e4d95caec1d28b880ae55ccf",
+  "gitHead": "33d615e892ed65332cfed67c44f3d8fb99fdc1d7",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },