@pie-lib/graphing 4.0.16 → 4.0.18

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.18](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@4.0.17...@pie-lib/graphing@4.0.18) (2026-08-26)
+
+### Bug Fixes
+
+- **graphing:** hold the focus on a new label and save it on blur PIE-681 ([26c5f98](https://github.com/pie-framework/pie-lib/commit/26c5f9875b45f4495d76827633f28d82d93d8cb9))
+
+## [4.0.17](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@4.0.16...@pie-lib/graphing@4.0.17) (2026-08-21)
+
+### Bug Fixes
+
+- **graphing:** focus a new label even if its tool was remounted PIE-681 ([663177b](https://github.com/pie-framework/pie-lib/commit/663177b95aa73f4f53ee2aff31c3bde750435d6e))
+
 ## [4.0.16](https://github.com/pie-framework/pie-lib/compare/@pie-lib/graphing@4.0.15...@pie-lib/graphing@4.0.16) (2026-08-18)
 
 ### Bug Fixes

package/lib/mark-label.js

@@ -20,6 +20,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEBOUNCE_DELAY = 500;
+// A new label insists on the focus for this long: in the DNA env something moves the focus while the
+// model save that creating the label triggered is handled, after the last render. Nothing typed yet
+// is what tells that apart from the user leaving the label.
+var INSIST_ON_FOCUS_FOR = 500;
+var INSIST_AT = [0, 50, 120, 250, 400];
 var StyledInputCorrect = (0, _styles.styled)('div')(function (_ref2) {
   var theme = _ref2.theme;
   return {
@@ -168,13 +173,16 @@ LabelInput.propTypes = {
   onBlur: _propTypes["default"].func
 };
 var MarkLabel = exports.MarkLabel = function MarkLabel(props) {
+  // the state repositions the label once the input has a size, the ref is never a render behind
+  var inputNode = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     input = _useState2[0],
     setInput = _useState2[1];
   var _ref = (0, _react.useCallback)(function (node) {
-    return setInput(node);
-  });
+    inputNode.current = node;
+    setInput(node);
+  }, []);
   var theme = (0, _styles.useTheme)();
   var mark = props.mark,
     graphProps = props.graphProps,
@@ -189,26 +197,51 @@ var MarkLabel = exports.MarkLabel = function MarkLabel(props) {
     correctnesslabel = mark.correctnesslabel,
     correctlabel = mark.correctlabel;
   var isFocused = function isFocused() {
-    return !!input && typeof document !== 'undefined' && document.activeElement === input;
+    return !!inputNode.current && typeof document !== 'undefined' && document.activeElement === inputNode.current;
+  };
+
+  // an empty label with an enabled input is one the user just added: label mode has to be on and it
+  // always starts off. Read from the mark, not from autoFocus, because the tool that asked for the
+  // label can be remounted by the marks coming back from the host before the input renders.
+  var isNewLabel = (0, _react.useRef)(mark.label === '' && !disabled && !mark.disabled);
+  var insistUntil = (0, _react.useRef)(0);
+  var lastSaved = (0, _react.useRef)(mark.label);
+  var insisting = function insisting() {
+    return Date.now() < insistUntil.current && !(inputNode.current && inputNode.current.value);
   };
   var onChange = function onChange(e) {
     return setLabel(e.target.value);
   };
+  var saveLabel = function saveLabel(value) {
+    if (value === lastSaved.current) {
+      return;
+    }
+    lastSaved.current = value;
+    props.onChange(value);
+  };
   var handleBlur = (0, _react.useCallback)(function () {
+    // in the DNA env the focus is moved while the model is saved - not the user leaving the label
+    if (insisting()) {
+      return;
+    }
+    isNewLabel.current = false;
     if (label === '') {
       props.onChange('');
+    } else if (label !== mark.label) {
+      // the debounce can still be pending, and once the focus is gone an echo of the model would
+      // overwrite what was typed before it fires
+      saveLabel(label);
     }
 
     // lets the tool know that this label is not being edited anymore, so it stops auto focusing it
     if (props.onBlur) {
       props.onBlur();
     }
-  }, [label, props.onChange, props.onBlur]);
+  }, [label, mark.label, props.onChange, props.onBlur]);
   var debouncedLabel = (0, _useDebounce.useDebounce)(label, DEBOUNCE_DELAY);
 
-  // useState only sets the value once, to synch props to state need useEffect.
-  // While this input has the focus we keep what the user typed: the mark can come back from an
-  // (async) model save with an older label and that would overwrite the characters typed meanwhile.
+  // props to state, but not while focused: the mark can come back from an async model save with an
+  // older label and overwrite what was typed meanwhile
   (0, _react.useEffect)(function () {
     if (isFocused()) {
       return;
@@ -219,25 +252,54 @@ var MarkLabel = exports.MarkLabel = function MarkLabel(props) {
   // pick up the change to debouncedLabel and save it
   (0, _react.useEffect)(function () {
     if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {
-      props.onChange(debouncedLabel);
+      saveLabel(debouncedLabel);
     }
   }, [debouncedLabel]);
+  var focusInput = function focusInput() {
+    var node = inputNode.current;
 
-  // A label that has just been added has to be focused so that it can be typed into right away.
-  // This also re-focuses the input if it gets remounted while it is being edited - saving the model
-  // is done by the host (api call) and the model that comes back can replace the input node.
-  (0, _react.useEffect)(function () {
-    if (!autoFocus || !input || disabled || isFocused()) {
+    // node.disabled, not the disabled prop: a disabled input silently ignores focus()
+    if (!autoFocus && !isNewLabel.current && !insisting() || !node || node.disabled || isFocused()) {
       return;
     }
-    input.focus();
+    node.focus();
+
+    // a new label is focused once, so it cannot fight over the focus with another one
+    if (isFocused()) {
+      isNewLabel.current = false;
+    }
 
     // keep the caret at the end, otherwise typing continues in front of the existing label
-    var caret = (input.value || '').length;
-    if (input.setSelectionRange) {
-      input.setSelectionRange(caret, caret);
+    var caret = (node.value || '').length;
+    if (node.setSelectionRange) {
+      node.setSelectionRange(caret, caret);
     }
-  }, [autoFocus, input, disabled]);
+  };
+
+  // after every render: the input can appear a render or more later (the mark comes back from an
+  // async model save) and a replaced node loses the focus without this component being told
+  (0, _react.useEffect)(function () {
+    return focusInput();
+  });
+
+  // and again on a timer, for the DNA env, where the focus is moved once the renders are over. The
+  // original code focused from a setTimeout, which is what let it survive that.
+  (0, _react.useEffect)(function () {
+    if (!autoFocus && !isNewLabel.current) {
+      return;
+    }
+    if (!insistUntil.current) {
+      insistUntil.current = Date.now() + INSIST_ON_FOCUS_FOR;
+    }
+    var timers = INSIST_AT.map(function (delay) {
+      return setTimeout(focusInput, delay);
+    });
+    return function () {
+      return timers.forEach(function (t) {
+        return clearTimeout(t);
+      });
+    };
+  }, [autoFocus]);
   var rect = input ? input.getBoundingClientRect() : {
     width: 0,
     height: 0
@@ -301,6 +363,12 @@ var MarkLabel = exports.MarkLabel = function MarkLabel(props) {
       style: style
     }, renderInput(studentInputStyle, label));
   }
+
+  // an empty label that cannot be edited is just an empty box - the config draws the background
+  // marks into every correct answer graph too
+  if (disabledInput && !label) {
+    return null;
+  }
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: style
   }, renderInput(getInputStyles(theme, disabled, mark.disabled), label));

package/lib/mark-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"mark-label.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_reactInputAutosize","_useDebounce","_plot","_renderUi","_labelSvgIcon","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","DEBOUNCE_DELAY","StyledInputCorrect","styled","_ref2","theme","padding","spacing","borderRadius","fontSize","backgroundColor","color","defaults","WHITE","CORRECT_WITH_ICON","border","concat","StyledInputIncorrect","_ref3","INCORRECT_WITH_ICON","StyledInputMissing","_ref4","MISSING_WITH_ICON","fontWeight","StyledIncorrect","getInputStyles","disabled","markDisabled","fontFamily","typography","PRIMARY_DARK","SECONDARY","WebkitOpacity","undefined","WebkitTextFillColor","getStudentInputStyles","position","exports","graphProps","mark","rect","width","height","scale","domain","range","shift","rightEdge","x","bottomEdge","y","h","max","v","min","coordinates","left","top","LabelInput","_ref5","_ref","externalInputRef","label","inputStyle","onChange","onBlur","createElement","inputRef","value","propTypes","PropTypes","func","string","bool","object","MarkLabel","props","_useState","useState","_useState2","_slicedToArray2","input","setInput","useCallback","node","useTheme","autoFocus","_useState3","_useState4","setLabel","correctness","correctnesslabel","correctlabel","isFocused","document","activeElement","target","handleBlur","debouncedLabel","useDebounce","useEffect","focus","caret","setSelectionRange","getBoundingClientRect","pos","leftTop","style","pointerEvents","display","alignItems","gap","secondLabelStyle","disabledInput","renderInput","labelValue","studentInputStyle","type","Fragment","marginLeft","types","GraphPropsType","_default"],"sources":["../src/mark-label.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled, useTheme } from '@mui/material/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport { useDebounce } from './use-debounce';\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport SvgIcon from './label-svg-icon';\n\nconst DEBOUNCE_DELAY = 500;\n\nconst StyledInputCorrect = styled('div')(({ theme }) => ({\n  float: 'right',\n  padding: theme.spacing(0.5),\n  borderRadius: '4px',\n  fontSize: '10px',\n  backgroundColor: color.defaults.WHITE,\n  color: color.defaults.CORRECT_WITH_ICON,\n  border: `solid 1px ${color.defaults.CORRECT_WITH_ICON}`,\n}));\n\nconst StyledInputIncorrect = styled('div')(({ theme }) => ({\n  float: 'right',\n  padding: theme.spacing(0.5),\n  borderRadius: '4px',\n  fontSize: '10px',\n  backgroundColor: color.defaults.WHITE,\n  color: color.defaults.INCORRECT_WITH_ICON,\n  border: `solid 1px ${color.defaults.INCORRECT_WITH_ICON}`,\n}));\n\nconst StyledInputMissing = styled('div')(({ theme }) => ({\n  float: 'right',\n  padding: theme.spacing(0.5),\n  borderRadius: '4px',\n  fontSize: '10px',\n  backgroundColor: color.defaults.WHITE,\n  color: color.defaults.MISSING_WITH_ICON,\n  border: `solid 1px ${color.defaults.MISSING_WITH_ICON}`,\n  fontWeight: 'bold',\n}));\n\nconst StyledIncorrect = styled('div')(() => ({\n  float: 'right',\n  padding: 0,\n  borderRadius: '4px',\n  fontSize: '10px',\n  backgroundColor: color.defaults.WHITE,\n  color: color.defaults.INCORRECT_WITH_ICON,\n  fontWeight: 'bold',\n}));\n\nconst getInputStyles = (theme, disabled, markDisabled) => ({\n  float: 'right',\n  padding: theme.spacing(0.5),\n  fontFamily: theme.typography.fontFamily,\n  fontSize: '10px',\n  border: disabled\n    ? `solid 1px ${color.defaults.PRIMARY_DARK}`\n    : markDisabled\n      ? `solid 1px ${color.disabled()}`\n      : `solid 1px ${color.defaults.SECONDARY}`,\n  borderRadius: '3px',\n  color: markDisabled ? color.disabled() : color.defaults.PRIMARY_DARK,\n  backgroundColor: color.defaults.WHITE,\n  WebkitOpacity: disabled ? '1' : undefined,\n  WebkitTextFillColor: markDisabled ? color.disabled() : undefined,\n});\n\nconst getStudentInputStyles = () => ({\n  padding: '0',\n  border: 'none',\n  color: 'inherit',\n  fontWeight: 'bold',\n});\n\nexport const position = (graphProps, mark, rect = { width: 0, height: 0 }) => {\n  const { scale, domain, range } = graphProps;\n  const shift = 5;\n\n  const rightEdge = scale.x(mark.x) + rect.width + shift;\n  const bottomEdge = scale.y(mark.y) + rect.height + shift;\n\n  const h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';\n  const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';\n\n  return `${v}-${h}`;\n};\n\nexport const coordinates = (graphProps, mark, rect = { width: 0, height: 0 }, position) => {\n  const { scale } = graphProps;\n  const shift = 5;\n\n  switch (position) {\n    case 'bottom-right':\n      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) + shift };\n    case 'bottom-left':\n      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) + shift };\n    case 'top-left':\n      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) - shift - rect.height };\n    case 'top-right':\n      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) - shift - rect.height };\n    default:\n      return {};\n  }\n};\n\nconst LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, onChange, onBlur }) => (\n  <AutosizeInput\n    inputRef={(r) => {\n      _ref(r);\n      externalInputRef(r);\n    }}\n    disabled={disabled}\n    inputStyle={inputStyle}\n    value={label}\n    onChange={onChange}\n    onBlur={onBlur}\n  />\n);\n\nLabelInput.propTypes = {\n  _ref: PropTypes.func,\n  externalInputRef: PropTypes.func,\n  label: PropTypes.string,\n  disabled: PropTypes.bool,\n  inputStyle: PropTypes.object,\n  onChange: PropTypes.func,\n  onBlur: PropTypes.func,\n};\n\nexport const MarkLabel = (props) => {\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => setInput(node));\n  const theme = useTheme();\n\n  const { mark, graphProps, disabled, autoFocus, inputRef: externalInputRef } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const { correctness, correctnesslabel, correctlabel } = mark;\n\n  const isFocused = () => !!input && typeof document !== 'undefined' && document.activeElement === input;\n\n  const onChange = (e) => setLabel(e.target.value);\n\n  const handleBlur = useCallback(() => {\n    if (label === '') {\n      props.onChange('');\n    }\n\n    // lets the tool know that this label is not being edited anymore, so it stops auto focusing it\n    if (props.onBlur) {\n      props.onBlur();\n    }\n  }, [label, props.onChange, props.onBlur]);\n\n  const debouncedLabel = useDebounce(label, DEBOUNCE_DELAY);\n\n  // useState only sets the value once, to synch props to state need useEffect.\n  // While this input has the focus we keep what the user typed: the mark can come back from an\n  // (async) model save with an older label and that would overwrite the characters typed meanwhile.\n  useEffect(() => {\n    if (isFocused()) {\n      return;\n    }\n\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  // pick up the change to debouncedLabel and save it\n  useEffect(() => {\n    if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {\n      props.onChange(debouncedLabel);\n    }\n  }, [debouncedLabel]);\n\n  // A label that has just been added has to be focused so that it can be typed into right away.\n  // This also re-focuses the input if it gets remounted while it is being edited - saving the model\n  // is done by the host (api call) and the model that comes back can replace the input node.\n  useEffect(() => {\n    if (!autoFocus || !input || disabled || isFocused()) {\n      return;\n    }\n\n    input.focus();\n\n    // keep the caret at the end, otherwise typing continues in front of the existing label\n    const caret = (input.value || '').length;\n\n    if (input.setSelectionRange) {\n      input.setSelectionRange(caret, caret);\n    }\n  }, [autoFocus, input, disabled]);\n\n  const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };\n  const pos = position(graphProps, mark, rect);\n  const leftTop = coordinates(graphProps, mark, rect, pos);\n\n  const style = {\n    position: 'fixed',\n    pointerEvents: 'auto',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '3px',\n    ...leftTop,\n  };\n\n  const secondLabelStyle = {\n    ...style,\n    top: leftTop.top + 25,\n  };\n\n  const disabledInput = disabled || mark.disabled;\n\n  const renderInput = (inputStyle, labelValue) => (\n    <LabelInput\n      _ref={_ref}\n      externalInputRef={externalInputRef}\n      label={labelValue}\n      disabled={disabledInput}\n      inputStyle={inputStyle}\n      onChange={onChange}\n      onBlur={handleBlur}\n    />\n  );\n\n  const studentInputStyle = getStudentInputStyles();\n\n  if (correctness === 'correct' && correctnesslabel === 'correct' && correctlabel) {\n    return (\n      <StyledInputCorrect style={style}>\n        <SvgIcon type=\"correct\" />\n        {renderInput(studentInputStyle, correctlabel)}\n      </StyledInputCorrect>\n    );\n  }\n\n  if (correctness === 'correct' && correctnesslabel === 'correct' && !correctlabel) {\n    return null;\n  }\n\n  if (correctness === 'correct' && correctnesslabel === 'incorrect') {\n    return (\n      <>\n        <StyledInputIncorrect style={style}>\n          <SvgIcon type=\"incorrect\" />\n          {label === '' ? (\n            <SvgIcon type=\"empty\" style={{ marginLeft: '3px' }} />\n          ) : (\n            renderInput(studentInputStyle, label)\n          )}\n        </StyledInputIncorrect>\n        <StyledInputMissing style={secondLabelStyle}>{renderInput(studentInputStyle, correctlabel)}</StyledInputMissing>\n      </>\n    );\n  }\n\n  if (correctness === 'missing') {\n    return <StyledInputMissing style={style}>{renderInput(studentInputStyle, label)}</StyledInputMissing>;\n  }\n\n  if (correctness === 'incorrect') {\n    return <StyledIncorrect style={style}>{renderInput(studentInputStyle, label)}</StyledIncorrect>;\n  }\n\n  return <div style={style}>{renderInput(getInputStyles(theme, disabled, mark.disabled), label)}</div>;\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onBlur: PropTypes.func,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n};\n\nexport default MarkLabel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"mark-label.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_reactInputAutosize","_useDebounce","_plot","_renderUi","_labelSvgIcon","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","DEBOUNCE_DELAY","INSIST_ON_FOCUS_FOR","INSIST_AT","StyledInputCorrect","styled","_ref2","theme","padding","spacing","borderRadius","fontSize","backgroundColor","color","defaults","WHITE","CORRECT_WITH_ICON","border","concat","StyledInputIncorrect","_ref3","INCORRECT_WITH_ICON","StyledInputMissing","_ref4","MISSING_WITH_ICON","fontWeight","StyledIncorrect","getInputStyles","disabled","markDisabled","fontFamily","typography","PRIMARY_DARK","SECONDARY","WebkitOpacity","undefined","WebkitTextFillColor","getStudentInputStyles","position","exports","graphProps","mark","rect","width","height","scale","domain","range","shift","rightEdge","x","bottomEdge","y","h","max","v","min","coordinates","left","top","LabelInput","_ref5","_ref","externalInputRef","label","inputStyle","onChange","onBlur","createElement","inputRef","value","propTypes","PropTypes","func","string","bool","object","MarkLabel","props","inputNode","useRef","_useState","useState","_useState2","_slicedToArray2","input","setInput","useCallback","node","current","useTheme","autoFocus","_useState3","_useState4","setLabel","correctness","correctnesslabel","correctlabel","isFocused","document","activeElement","isNewLabel","insistUntil","lastSaved","insisting","Date","now","target","saveLabel","handleBlur","debouncedLabel","useDebounce","useEffect","focusInput","focus","caret","setSelectionRange","timers","map","delay","setTimeout","clearTimeout","getBoundingClientRect","pos","leftTop","style","pointerEvents","display","alignItems","gap","secondLabelStyle","disabledInput","renderInput","labelValue","studentInputStyle","type","Fragment","marginLeft","types","GraphPropsType","_default"],"sources":["../src/mark-label.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled, useTheme } from '@mui/material/styles';\nimport AutosizeInput from 'react-input-autosize';\nimport { useDebounce } from './use-debounce';\nimport { types } from '@pie-lib/plot';\nimport { color } from '@pie-lib/render-ui';\nimport SvgIcon from './label-svg-icon';\n\nconst DEBOUNCE_DELAY = 500;\n// A new label insists on the focus for this long: in the DNA env something moves the focus while the\n// model save that creating the label triggered is handled, after the last render. Nothing typed yet\n// is what tells that apart from the user leaving the label.\nconst INSIST_ON_FOCUS_FOR = 500;\nconst INSIST_AT = [0, 50, 120, 250, 400];\n\nconst StyledInputCorrect = styled('div')(({ theme }) => ({\n  float: 'right',\n  padding: theme.spacing(0.5),\n  borderRadius: '4px',\n  fontSize: '10px',\n  backgroundColor: color.defaults.WHITE,\n  color: color.defaults.CORRECT_WITH_ICON,\n  border: `solid 1px ${color.defaults.CORRECT_WITH_ICON}`,\n}));\n\nconst StyledInputIncorrect = styled('div')(({ theme }) => ({\n  float: 'right',\n  padding: theme.spacing(0.5),\n  borderRadius: '4px',\n  fontSize: '10px',\n  backgroundColor: color.defaults.WHITE,\n  color: color.defaults.INCORRECT_WITH_ICON,\n  border: `solid 1px ${color.defaults.INCORRECT_WITH_ICON}`,\n}));\n\nconst StyledInputMissing = styled('div')(({ theme }) => ({\n  float: 'right',\n  padding: theme.spacing(0.5),\n  borderRadius: '4px',\n  fontSize: '10px',\n  backgroundColor: color.defaults.WHITE,\n  color: color.defaults.MISSING_WITH_ICON,\n  border: `solid 1px ${color.defaults.MISSING_WITH_ICON}`,\n  fontWeight: 'bold',\n}));\n\nconst StyledIncorrect = styled('div')(() => ({\n  float: 'right',\n  padding: 0,\n  borderRadius: '4px',\n  fontSize: '10px',\n  backgroundColor: color.defaults.WHITE,\n  color: color.defaults.INCORRECT_WITH_ICON,\n  fontWeight: 'bold',\n}));\n\nconst getInputStyles = (theme, disabled, markDisabled) => ({\n  float: 'right',\n  padding: theme.spacing(0.5),\n  fontFamily: theme.typography.fontFamily,\n  fontSize: '10px',\n  border: disabled\n    ? `solid 1px ${color.defaults.PRIMARY_DARK}`\n    : markDisabled\n      ? `solid 1px ${color.disabled()}`\n      : `solid 1px ${color.defaults.SECONDARY}`,\n  borderRadius: '3px',\n  color: markDisabled ? color.disabled() : color.defaults.PRIMARY_DARK,\n  backgroundColor: color.defaults.WHITE,\n  WebkitOpacity: disabled ? '1' : undefined,\n  WebkitTextFillColor: markDisabled ? color.disabled() : undefined,\n});\n\nconst getStudentInputStyles = () => ({\n  padding: '0',\n  border: 'none',\n  color: 'inherit',\n  fontWeight: 'bold',\n});\n\nexport const position = (graphProps, mark, rect = { width: 0, height: 0 }) => {\n  const { scale, domain, range } = graphProps;\n  const shift = 5;\n\n  const rightEdge = scale.x(mark.x) + rect.width + shift;\n  const bottomEdge = scale.y(mark.y) + rect.height + shift;\n\n  const h = rightEdge >= scale.x(domain.max) ? 'left' : 'right';\n  const v = bottomEdge >= scale.y(range.min) ? 'top' : 'bottom';\n\n  return `${v}-${h}`;\n};\n\nexport const coordinates = (graphProps, mark, rect = { width: 0, height: 0 }, position) => {\n  const { scale } = graphProps;\n  const shift = 5;\n\n  switch (position) {\n    case 'bottom-right':\n      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) + shift };\n    case 'bottom-left':\n      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) + shift };\n    case 'top-left':\n      return { left: scale.x(mark.x) - shift - rect.width, top: scale.y(mark.y) - shift - rect.height };\n    case 'top-right':\n      return { left: scale.x(mark.x) + shift, top: scale.y(mark.y) - shift - rect.height };\n    default:\n      return {};\n  }\n};\n\nconst LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, onChange, onBlur }) => (\n  <AutosizeInput\n    inputRef={(r) => {\n      _ref(r);\n      externalInputRef(r);\n    }}\n    disabled={disabled}\n    inputStyle={inputStyle}\n    value={label}\n    onChange={onChange}\n    onBlur={onBlur}\n  />\n);\n\nLabelInput.propTypes = {\n  _ref: PropTypes.func,\n  externalInputRef: PropTypes.func,\n  label: PropTypes.string,\n  disabled: PropTypes.bool,\n  inputStyle: PropTypes.object,\n  onChange: PropTypes.func,\n  onBlur: PropTypes.func,\n};\n\nexport const MarkLabel = (props) => {\n  // the state repositions the label once the input has a size, the ref is never a render behind\n  const inputNode = useRef(null);\n  const [input, setInput] = useState(null);\n  const _ref = useCallback((node) => {\n    inputNode.current = node;\n    setInput(node);\n  }, []);\n  const theme = useTheme();\n\n  const { mark, graphProps, disabled, autoFocus, inputRef: externalInputRef } = props;\n\n  const [label, setLabel] = useState(mark.label);\n  const { correctness, correctnesslabel, correctlabel } = mark;\n\n  const isFocused = () =>\n    !!inputNode.current && typeof document !== 'undefined' && document.activeElement === inputNode.current;\n\n  // an empty label with an enabled input is one the user just added: label mode has to be on and it\n  // always starts off. Read from the mark, not from autoFocus, because the tool that asked for the\n  // label can be remounted by the marks coming back from the host before the input renders.\n  const isNewLabel = useRef(mark.label === '' && !disabled && !mark.disabled);\n  const insistUntil = useRef(0);\n  const lastSaved = useRef(mark.label);\n  const insisting = () => Date.now() < insistUntil.current && !(inputNode.current && inputNode.current.value);\n\n  const onChange = (e) => setLabel(e.target.value);\n\n  const saveLabel = (value) => {\n    if (value === lastSaved.current) {\n      return;\n    }\n\n    lastSaved.current = value;\n    props.onChange(value);\n  };\n\n  const handleBlur = useCallback(() => {\n    // in the DNA env the focus is moved while the model is saved - not the user leaving the label\n    if (insisting()) {\n      return;\n    }\n\n    isNewLabel.current = false;\n\n    if (label === '') {\n      props.onChange('');\n    } else if (label !== mark.label) {\n      // the debounce can still be pending, and once the focus is gone an echo of the model would\n      // overwrite what was typed before it fires\n      saveLabel(label);\n    }\n\n    // lets the tool know that this label is not being edited anymore, so it stops auto focusing it\n    if (props.onBlur) {\n      props.onBlur();\n    }\n  }, [label, mark.label, props.onChange, props.onBlur]);\n\n  const debouncedLabel = useDebounce(label, DEBOUNCE_DELAY);\n\n  // props to state, but not while focused: the mark can come back from an async model save with an\n  // older label and overwrite what was typed meanwhile\n  useEffect(() => {\n    if (isFocused()) {\n      return;\n    }\n\n    setLabel(mark.label);\n  }, [mark.label]);\n\n  // pick up the change to debouncedLabel and save it\n  useEffect(() => {\n    if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {\n      saveLabel(debouncedLabel);\n    }\n  }, [debouncedLabel]);\n\n  const focusInput = () => {\n    const node = inputNode.current;\n\n    // node.disabled, not the disabled prop: a disabled input silently ignores focus()\n    if ((!autoFocus && !isNewLabel.current && !insisting()) || !node || node.disabled || isFocused()) {\n      return;\n    }\n\n    node.focus();\n\n    // a new label is focused once, so it cannot fight over the focus with another one\n    if (isFocused()) {\n      isNewLabel.current = false;\n    }\n\n    // keep the caret at the end, otherwise typing continues in front of the existing label\n    const caret = (node.value || '').length;\n\n    if (node.setSelectionRange) {\n      node.setSelectionRange(caret, caret);\n    }\n  };\n\n  // after every render: the input can appear a render or more later (the mark comes back from an\n  // async model save) and a replaced node loses the focus without this component being told\n  useEffect(() => focusInput());\n\n  // and again on a timer, for the DNA env, where the focus is moved once the renders are over. The\n  // original code focused from a setTimeout, which is what let it survive that.\n  useEffect(() => {\n    if (!autoFocus && !isNewLabel.current) {\n      return;\n    }\n\n    if (!insistUntil.current) {\n      insistUntil.current = Date.now() + INSIST_ON_FOCUS_FOR;\n    }\n\n    const timers = INSIST_AT.map((delay) => setTimeout(focusInput, delay));\n\n    return () => timers.forEach((t) => clearTimeout(t));\n  }, [autoFocus]);\n\n  const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };\n  const pos = position(graphProps, mark, rect);\n  const leftTop = coordinates(graphProps, mark, rect, pos);\n\n  const style = {\n    position: 'fixed',\n    pointerEvents: 'auto',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '3px',\n    ...leftTop,\n  };\n\n  const secondLabelStyle = {\n    ...style,\n    top: leftTop.top + 25,\n  };\n\n  const disabledInput = disabled || mark.disabled;\n\n  const renderInput = (inputStyle, labelValue) => (\n    <LabelInput\n      _ref={_ref}\n      externalInputRef={externalInputRef}\n      label={labelValue}\n      disabled={disabledInput}\n      inputStyle={inputStyle}\n      onChange={onChange}\n      onBlur={handleBlur}\n    />\n  );\n\n  const studentInputStyle = getStudentInputStyles();\n\n  if (correctness === 'correct' && correctnesslabel === 'correct' && correctlabel) {\n    return (\n      <StyledInputCorrect style={style}>\n        <SvgIcon type=\"correct\" />\n        {renderInput(studentInputStyle, correctlabel)}\n      </StyledInputCorrect>\n    );\n  }\n\n  if (correctness === 'correct' && correctnesslabel === 'correct' && !correctlabel) {\n    return null;\n  }\n\n  if (correctness === 'correct' && correctnesslabel === 'incorrect') {\n    return (\n      <>\n        <StyledInputIncorrect style={style}>\n          <SvgIcon type=\"incorrect\" />\n          {label === '' ? (\n            <SvgIcon type=\"empty\" style={{ marginLeft: '3px' }} />\n          ) : (\n            renderInput(studentInputStyle, label)\n          )}\n        </StyledInputIncorrect>\n        <StyledInputMissing style={secondLabelStyle}>{renderInput(studentInputStyle, correctlabel)}</StyledInputMissing>\n      </>\n    );\n  }\n\n  if (correctness === 'missing') {\n    return <StyledInputMissing style={style}>{renderInput(studentInputStyle, label)}</StyledInputMissing>;\n  }\n\n  if (correctness === 'incorrect') {\n    return <StyledIncorrect style={style}>{renderInput(studentInputStyle, label)}</StyledIncorrect>;\n  }\n\n  // an empty label that cannot be edited is just an empty box - the config draws the background\n  // marks into every correct answer graph too\n  if (disabledInput && !label) {\n    return null;\n  }\n\n  return <div style={style}>{renderInput(getInputStyles(theme, disabled, mark.disabled), label)}</div>;\n};\n\nMarkLabel.propTypes = {\n  autoFocus: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onBlur: PropTypes.func,\n  onChange: PropTypes.func,\n  graphProps: types.GraphPropsType,\n  inputRef: PropTypes.func,\n  mark: PropTypes.object,\n};\n\nexport default MarkLabel;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.0.16",
+  "version": "4.0.18",
   "description": "Graphing components",
   "keywords": [
     "react",
@@ -22,11 +22,11 @@
     "@mapbox/point-geometry": "^1.1.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^4.1.0",
-    "@pie-lib/editable-html-tip-tap": "^2.1.13",
+    "@pie-lib/drag": "^4.1.2",
+    "@pie-lib/editable-html-tip-tap": "^2.1.15",
     "@pie-lib/graphing-utils": "^3.0.2",
-    "@pie-lib/plot": "^4.0.15",
-    "@pie-lib/render-ui": "^6.1.3",
+    "@pie-lib/plot": "^4.0.17",
+    "@pie-lib/render-ui": "^7.0.1",
     "@pie-lib/translator": "^4.0.2",
     "@visx/axis": "^3.0.0",
     "@visx/clip-path": "^3.0.0",
@@ -54,6 +54,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "bb18a8752144b330cc74d49eac15d250c74fb541",
+  "gitHead": "38176e40de37e31fc3bf4edb8669cf2238e910d3",
   "scripts": {}
 }

package/src/__tests__/graph.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@pie-lib/test-utils';
+import { act, fireEvent, render } from '@pie-lib/test-utils';
 import { graphProps } from './utils';
 import Graph, { removeBuildingToolIfCurrentToolDiffers } from '../graph';
 import { toolsArr } from '../tools';
@@ -719,3 +719,78 @@ describe('Graph', () => {
     });
   });
 });
+
+describe('label focus', () => {
+  // the marks are owned by the host and come back from a model save asynchronously; a mark that
+  // shows up in front of the labelled one changes its key, so the tool that handled the click is
+  // remounted and the editingLabel it set is gone before the label input ever renders
+  const Host = ({ shiftMarks }) => {
+    const [marks, setMarks] = React.useState([{ type: 'point', x: 2, y: 2 }]);
+
+    return (
+      <Graph
+        tools={toolsArr}
+        marks={marks}
+        labelModeEnabled={true}
+        onChangeMarks={(next) =>
+          setTimeout(() => setMarks(shiftMarks ? [{ type: 'point', x: 5, y: 5 }, ...next] : next), 30)
+        }
+        domain={{ min: 0, max: 10, step: 1 }}
+        range={{ min: 0, max: 10, step: 1 }}
+        size={{ width: 400, height: 400 }}
+        {...graphProps(0, 10, 0, 10)}
+      />
+    );
+  };
+
+  const clickPoint = (container) => {
+    const circle = container.querySelector('circle');
+
+    fireEvent.mouseDown(circle, { button: 0 });
+    fireEvent.mouseUp(circle, { button: 0 });
+    fireEvent.click(circle, { button: 0 });
+    act(() => jest.advanceTimersByTime(200));
+  };
+
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.useRealTimers());
+
+  it('focuses the label that was just added', () => {
+    const { container } = render(<Host />);
+
+    clickPoint(container);
+
+    const input = container.querySelector('foreignObject input');
+    expect(input).not.toBe(null);
+    expect(document.activeElement).toBe(input);
+  });
+
+  // in the DNA env the focus is moved while the model save is handled, after the last render
+  it('takes the focus back when something steals it while the model is saved', () => {
+    const { container } = render(<Host />);
+
+    clickPoint(container);
+    const input = container.querySelector('foreignObject input');
+    expect(document.activeElement).toBe(input);
+
+    const elsewhere = document.createElement('input');
+    document.body.appendChild(elsewhere);
+    elsewhere.focus();
+    expect(document.activeElement).toBe(elsewhere);
+
+    act(() => jest.advanceTimersByTime(300));
+
+    expect(document.activeElement).toBe(input);
+    elsewhere.remove();
+  });
+
+  it('focuses the label even if the tool was remounted before it rendered', () => {
+    const { container } = render(<Host shiftMarks={true} />);
+
+    clickPoint(container);
+
+    const input = container.querySelector('foreignObject input');
+    expect(input).not.toBe(null);
+    expect(document.activeElement).toBe(input);
+  });
+});

package/src/__tests__/mark-label.test.jsx

@@ -75,18 +75,50 @@ describe('MarkLabel - editing', () => {
       expect(input.selectionEnd).toBe(2);
     });
 
-    it('does not focus the input when autoFocus is not set', () => {
-      const { input } = renderComponent();
+    it('does not focus the input of an existing label when autoFocus is not set', () => {
+      const { input } = renderComponent({ mark: { x: 1, y: 1, label: 'A' } });
 
       expect(document.activeElement).not.toBe(input);
     });
 
     it('does not focus the input when disabled', () => {
-      const { input } = renderComponent({ autoFocus: true, disabled: true });
+      const { input } = renderComponent({ autoFocus: true, disabled: true, mark: { x: 1, y: 1, label: 'A' } });
+
+      expect(document.activeElement).not.toBe(input);
+    });
+
+    it('does not focus the input of a disabled mark', () => {
+      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'A', disabled: true } });
 
       expect(document.activeElement).not.toBe(input);
     });
 
+    // the focus can go away without this component hearing about it - the input node gets replaced
+    // by a render higher up, so no blur is fired and autoFocus is still on
+    it('takes the focus back on the next render while it is still being edited', () => {
+      const { input, rerenderWith } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'A' } });
+
+      expect(document.activeElement).toBe(input);
+
+      input.blur();
+      expect(document.activeElement).not.toBe(input);
+
+      rerenderWith({ mark: { x: 1, y: 1, label: 'A' } });
+
+      expect(document.activeElement).toBe(input);
+    });
+
+    it('leaves the caret where the user put it while the input has the focus', () => {
+      const { input, rerenderWith } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'ABC' } });
+
+      input.setSelectionRange(1, 1);
+
+      rerenderWith({ mark: { x: 1, y: 1, label: 'ABC' } });
+
+      expect(document.activeElement).toBe(input);
+      expect(input.selectionStart).toBe(1);
+    });
+
     it('focuses the input once it is no longer disabled', () => {
       const { rerenderWith, container } = renderComponent({ autoFocus: true, disabled: true });
 
@@ -118,6 +150,76 @@ describe('MarkLabel - editing', () => {
     });
   });
 
+  // the tool asks for the focus with autoFocus, but its state can be gone before the input renders:
+  // the marks come back from the host asynchronously and can remount the tool. An empty label in
+  // label mode is a label the user has just added, so the input can tell on its own.
+  describe('a label that was just added', () => {
+    it('focuses itself without the tool asking', () => {
+      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
+
+      expect(document.activeElement).toBe(input);
+    });
+
+    it('focuses itself again when it is remounted before it was typed into', () => {
+      const props = {
+        onChange,
+        onBlur,
+        inputRef: jest.fn(),
+        mark: { x: 1, y: 1, label: '' },
+        graphProps: getGraphProps(0, 10, 0, 10),
+      };
+      const { container, rerender } = render(<MarkLabel key="first" {...props} />);
+      const first = input(container);
+
+      rerender(<MarkLabel key="second" {...props} />);
+      const second = input(container);
+
+      expect(second).not.toBe(first);
+      expect(document.activeElement).toBe(second);
+    });
+
+    it('stops chasing the focus once it has been left', () => {
+      const { input, rerenderWith } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
+
+      expect(document.activeElement).toBe(input);
+
+      input.blur();
+      rerenderWith({ mark: { x: 1, y: 1, label: '' } });
+
+      expect(document.activeElement).not.toBe(input);
+    });
+
+    // outside of label mode the input is disabled, which is how an empty label that was loaded with
+    // the item is told apart from one the user has just added - label mode always starts off
+    // the config draws the background marks into the correct answer graphs as disabled marks
+    it('is not rendered at all while it cannot be edited', () => {
+      const { container } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: '' } });
+
+      expect(container.querySelector('input')).toBe(null);
+    });
+
+    it('is still rendered uneditable once it has text', () => {
+      const { container } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: 'A' } });
+
+      expect(container.querySelector('input').value).toBe('A');
+    });
+
+    it('is not focused when label mode is turned on afterwards', () => {
+      const { rerenderWith, container } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: '' } });
+
+      rerenderWith({ disabled: false });
+
+      expect(input(container)).not.toBe(null);
+      expect(document.activeElement).not.toBe(input(container));
+    });
+
+    it('is not rendered for a disabled mark while it is empty', () => {
+      const { container } = renderComponent({ mark: { x: 1, y: 1, label: '', disabled: true } });
+
+      expect(container.querySelector('input')).toBe(null);
+    });
+  });
+
   describe('syncing mark.label into the input', () => {
     it('picks up a new mark.label while the input does not have the focus', () => {
       const { rerenderWith, container } = renderComponent({ mark: { x: 1, y: 1, label: 'A' } });
@@ -153,6 +255,29 @@ describe('MarkLabel - editing', () => {
       expect(onBlur).toHaveBeenCalled();
     });
 
+    // clicking a button or anything else interactive blurs the label while the debounce is pending
+    it('saves what was typed straight away', () => {
+      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
+
+      fireEvent.change(input, { target: { value: 'AB' } });
+      fireEvent.blur(input);
+
+      expect(onChange).toHaveBeenCalledWith('AB');
+    });
+
+    it('does not save it twice when the debounce catches up', () => {
+      jest.useFakeTimers();
+      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
+
+      fireEvent.change(input, { target: { value: 'AB' } });
+      fireEvent.blur(input);
+      act(() => jest.advanceTimersByTime(1000));
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith('AB');
+      jest.useRealTimers();
+    });
+
     it('reports an empty label on blur', () => {
       const { input } = renderComponent({ mark: { x: 1, y: 1, label: 'A' } });
 

package/src/mark-label.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { styled, useTheme } from '@mui/material/styles';
 import AutosizeInput from 'react-input-autosize';
@@ -8,6 +8,11 @@ import { color } from '@pie-lib/render-ui';
 import SvgIcon from './label-svg-icon';
 
 const DEBOUNCE_DELAY = 500;
+// A new label insists on the focus for this long: in the DNA env something moves the focus while the
+// model save that creating the label triggered is handled, after the last render. Nothing typed yet
+// is what tells that apart from the user leaving the label.
+const INSIST_ON_FOCUS_FOR = 500;
+const INSIST_AT = [0, 50, 120, 250, 400];
 
 const StyledInputCorrect = styled('div')(({ theme }) => ({
   float: 'right',
@@ -130,8 +135,13 @@ LabelInput.propTypes = {
 };
 
 export const MarkLabel = (props) => {
+  // the state repositions the label once the input has a size, the ref is never a render behind
+  const inputNode = useRef(null);
   const [input, setInput] = useState(null);
-  const _ref = useCallback((node) => setInput(node));
+  const _ref = useCallback((node) => {
+    inputNode.current = node;
+    setInput(node);
+  }, []);
   const theme = useTheme();
 
   const { mark, graphProps, disabled, autoFocus, inputRef: externalInputRef } = props;
@@ -139,26 +149,54 @@ export const MarkLabel = (props) => {
   const [label, setLabel] = useState(mark.label);
   const { correctness, correctnesslabel, correctlabel } = mark;
 
-  const isFocused = () => !!input && typeof document !== 'undefined' && document.activeElement === input;
+  const isFocused = () =>
+    !!inputNode.current && typeof document !== 'undefined' && document.activeElement === inputNode.current;
+
+  // an empty label with an enabled input is one the user just added: label mode has to be on and it
+  // always starts off. Read from the mark, not from autoFocus, because the tool that asked for the
+  // label can be remounted by the marks coming back from the host before the input renders.
+  const isNewLabel = useRef(mark.label === '' && !disabled && !mark.disabled);
+  const insistUntil = useRef(0);
+  const lastSaved = useRef(mark.label);
+  const insisting = () => Date.now() < insistUntil.current && !(inputNode.current && inputNode.current.value);
 
   const onChange = (e) => setLabel(e.target.value);
 
+  const saveLabel = (value) => {
+    if (value === lastSaved.current) {
+      return;
+    }
+
+    lastSaved.current = value;
+    props.onChange(value);
+  };
+
   const handleBlur = useCallback(() => {
+    // in the DNA env the focus is moved while the model is saved - not the user leaving the label
+    if (insisting()) {
+      return;
+    }
+
+    isNewLabel.current = false;
+
     if (label === '') {
       props.onChange('');
+    } else if (label !== mark.label) {
+      // the debounce can still be pending, and once the focus is gone an echo of the model would
+      // overwrite what was typed before it fires
+      saveLabel(label);
     }
 
     // lets the tool know that this label is not being edited anymore, so it stops auto focusing it
     if (props.onBlur) {
       props.onBlur();
     }
-  }, [label, props.onChange, props.onBlur]);
+  }, [label, mark.label, props.onChange, props.onBlur]);
 
   const debouncedLabel = useDebounce(label, DEBOUNCE_DELAY);
 
-  // useState only sets the value once, to synch props to state need useEffect.
-  // While this input has the focus we keep what the user typed: the mark can come back from an
-  // (async) model save with an older label and that would overwrite the characters typed meanwhile.
+  // props to state, but not while focused: the mark can come back from an async model save with an
+  // older label and overwrite what was typed meanwhile
   useEffect(() => {
     if (isFocused()) {
       return;
@@ -170,27 +208,52 @@ export const MarkLabel = (props) => {
   // pick up the change to debouncedLabel and save it
   useEffect(() => {
     if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {
-      props.onChange(debouncedLabel);
+      saveLabel(debouncedLabel);
     }
   }, [debouncedLabel]);
 
-  // A label that has just been added has to be focused so that it can be typed into right away.
-  // This also re-focuses the input if it gets remounted while it is being edited - saving the model
-  // is done by the host (api call) and the model that comes back can replace the input node.
-  useEffect(() => {
-    if (!autoFocus || !input || disabled || isFocused()) {
+  const focusInput = () => {
+    const node = inputNode.current;
+
+    // node.disabled, not the disabled prop: a disabled input silently ignores focus()
+    if ((!autoFocus && !isNewLabel.current && !insisting()) || !node || node.disabled || isFocused()) {
       return;
     }
 
-    input.focus();
+    node.focus();
+
+    // a new label is focused once, so it cannot fight over the focus with another one
+    if (isFocused()) {
+      isNewLabel.current = false;
+    }
 
     // keep the caret at the end, otherwise typing continues in front of the existing label
-    const caret = (input.value || '').length;
+    const caret = (node.value || '').length;
+
+    if (node.setSelectionRange) {
+      node.setSelectionRange(caret, caret);
+    }
+  };
+
+  // after every render: the input can appear a render or more later (the mark comes back from an
+  // async model save) and a replaced node loses the focus without this component being told
+  useEffect(() => focusInput());
+
+  // and again on a timer, for the DNA env, where the focus is moved once the renders are over. The
+  // original code focused from a setTimeout, which is what let it survive that.
+  useEffect(() => {
+    if (!autoFocus && !isNewLabel.current) {
+      return;
+    }
 
-    if (input.setSelectionRange) {
-      input.setSelectionRange(caret, caret);
+    if (!insistUntil.current) {
+      insistUntil.current = Date.now() + INSIST_ON_FOCUS_FOR;
     }
-  }, [autoFocus, input, disabled]);
+
+    const timers = INSIST_AT.map((delay) => setTimeout(focusInput, delay));
+
+    return () => timers.forEach((t) => clearTimeout(t));
+  }, [autoFocus]);
 
   const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };
   const pos = position(graphProps, mark, rect);
@@ -263,6 +326,12 @@ export const MarkLabel = (props) => {
     return <StyledIncorrect style={style}>{renderInput(studentInputStyle, label)}</StyledIncorrect>;
   }
 
+  // an empty label that cannot be edited is just an empty box - the config draws the background
+  // marks into every correct answer graph too
+  if (disabledInput && !label) {
+    return null;
+  }
+
   return <div style={style}>{renderInput(getInputStyles(theme, disabled, mark.disabled), label)}</div>;
 };
 

package/src/tools/point/__tests__/component.test.jsx

@@ -409,7 +409,8 @@ describe('Component', () => {
       expect(document.activeElement).not.toBe(labelNode.querySelector('input'));
     });
 
-    it('stops auto focusing the label once it is blurred', () => {
+    // the blur that the DNA env causes by moving the focus is not the user leaving the label
+    it('keeps the focus on a new empty label that something else blurred', () => {
       const { container } = render(<Controlled initialMark={xy(1, 1)} labelModeEnabled={true} />);
 
       clickPoint(container);
@@ -417,9 +418,23 @@ describe('Component', () => {
       expect(document.activeElement).toBe(input);
 
       fireEvent.blur(input);
+      fireEvent.change(input, { target: { value: 'A' } });
+
+      expect(document.activeElement).toBe(input);
+    });
+
+    it('stops auto focusing the label once it has text and is blurred', () => {
+      const { container } = render(<Controlled initialMark={xy(1, 1)} labelModeEnabled={true} />);
+
+      clickPoint(container);
+      const input = labelNode.querySelector('input');
 
-      // a re-render must not pull the focus back into the label the user just left
       fireEvent.change(input, { target: { value: 'A' } });
+      fireEvent.blur(input);
+      input.blur();
+
+      // a re-render must not pull the focus back into the label the user just left
+      fireEvent.change(input, { target: { value: 'AB' } });
       expect(document.activeElement).not.toBe(input);
     });