@pie-lib/graphing 4.0.23 → 4.0.24-beta.10

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

@@ -1,4 +1,4 @@
-import { act, fireEvent, render } from '@pie-lib/test-utils';
+import { render } from '@pie-lib/test-utils';
 import React from 'react';
 import { coordinates, MarkLabel, position } from '../mark-label';
 import { graphProps as getGraphProps } from './utils';
@@ -30,380 +30,6 @@ describe('MarkLabel', () => {
   });
 });
 
-describe('MarkLabel - editing', () => {
-  let onChange;
-  let onBlur;
-
-  beforeEach(() => {
-    onChange = jest.fn();
-    onBlur = jest.fn();
-  });
-
-  // the label input is the only input MarkLabel renders (react-input-autosize)
-  const input = (container) => container.querySelector('input');
-
-  const renderComponent = (extras) => {
-    const defaults = {
-      onChange,
-      onBlur,
-      inputRef: jest.fn(),
-      mark: { x: 1, y: 1, label: '' },
-      graphProps: getGraphProps(0, 10, 0, 10),
-    };
-    const props = { ...defaults, ...extras };
-    const result = render(<MarkLabel {...props} />);
-
-    return {
-      ...result,
-      input: input(result.container),
-      rerenderWith: (next) => result.rerender(<MarkLabel {...props} {...next} />),
-    };
-  };
-
-  describe('autoFocus', () => {
-    it('focuses the input so a new label can be typed into right away', () => {
-      const { input } = renderComponent({ autoFocus: true });
-
-      expect(document.activeElement).toBe(input);
-    });
-
-    it('leaves the caret at the end of an existing label', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'AB' } });
-
-      expect(document.activeElement).toBe(input);
-      expect(input.selectionStart).toBe(2);
-      expect(input.selectionEnd).toBe(2);
-    });
-
-    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, 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 });
-
-      rerenderWith({ disabled: false });
-
-      expect(document.activeElement).toBe(input(container));
-    });
-
-    // the host saves the model with an api call and the model that comes back can replace the
-    // input node - the label has to keep the focus across that remount
-    it('re-focuses the input when it is remounted while being edited', () => {
-      const props = {
-        autoFocus: true,
-        onChange,
-        inputRef: jest.fn(),
-        mark: { x: 1, y: 1, label: 'A' },
-        graphProps: getGraphProps(0, 10, 0, 10),
-      };
-      const { container, rerender } = render(<MarkLabel key="first" {...props} />);
-      const first = input(container);
-
-      expect(document.activeElement).toBe(first);
-
-      rerender(<MarkLabel key="second" {...props} />);
-      const second = input(container);
-
-      expect(second).not.toBe(first);
-      expect(document.activeElement).toBe(second);
-    });
-  });
-
-  // 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);
-    });
-
-    // an input sized to its content is 2px wide while it is empty, and chrome paints the caret of
-    // an input inside an svg foreignObject as a hairline that never blinks - so an empty label that
-    // has the focus has to be wide enough to be seen as a box waiting for text
-    it('is wide enough to be seen while it is empty', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      expect(parseInt(input.style.width, 10)).toBeGreaterThanOrEqual(30);
-    });
-
-    it('is only as wide as its text once it cannot be edited', () => {
-      const { container } = renderComponent({ disabled: true, mark: { x: 1, y: 1, label: 'A' } });
-
-      expect(parseInt(container.querySelector('input').style.width, 10)).toBeLessThan(30);
-    });
-  });
-
-  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' } });
-
-      rerenderWith({ mark: { x: 1, y: 1, label: 'updated' } });
-
-      expect(input(container).value).toBe('updated');
-    });
-
-    // a mark coming back from an (async) model save can carry an older label - applying it would
-    // wipe out the characters typed in the meantime
-    it('keeps what the user typed while the input has the focus', () => {
-      const { input, rerenderWith } = renderComponent({ autoFocus: true });
-
-      expect(document.activeElement).toBe(input);
-
-      fireEvent.change(input, { target: { value: 'AB' } });
-      expect(input.value).toBe('AB');
-
-      // the host echoes back the label as it was one keystroke ago
-      rerenderWith({ mark: { x: 1, y: 1, label: 'A' } });
-
-      expect(input.value).toBe('AB');
-    });
-  });
-
-  // the characters land at the document's caret, not at the focused node. In the authoring
-  // environment the input ends up focused with no caret anywhere: keypress fires and nothing is
-  // inserted. jsdom never reports a caret either, so this is that state - the focus cycle that
-  // repairs it must not hand the label over to the blur handling.
-  describe('a focused input with no caret', () => {
-    it('is repaired without reporting the label as removed', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: '' } });
-
-      expect(document.activeElement).toBe(input);
-      expect(onChange).not.toHaveBeenCalled();
-      expect(onBlur).not.toHaveBeenCalled();
-    });
-
-    it('leaves the caret at the end of a label that already has text', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'AB' } });
-
-      expect(document.activeElement).toBe(input);
-      expect(input.selectionStart).toBe(2);
-      expect(onChange).not.toHaveBeenCalled();
-    });
-  });
-
-  // clicking another window, the devtools, or the host moving the focus while it saves the model:
-  // the label is not being left, so it must survive and take the focus back
-  describe('while the window is away', () => {
-    const windowGoesAway = () => window.dispatchEvent(new Event('blur'));
-    const windowComesBack = () => window.dispatchEvent(new Event('focus'));
-
-    it('keeps an empty label instead of reporting it as removed', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      windowGoesAway();
-      fireEvent.blur(input);
-
-      expect(onChange).not.toHaveBeenCalled();
-      expect(onBlur).not.toHaveBeenCalled();
-    });
-
-    it('takes the focus back when the window comes back', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: '' } });
-
-      // the focus is moved to another input rather than with input.blur(): jsdom fires a window
-      // focus event as part of blur(), which is the very thing being tested here
-      const elsewhere = document.createElement('input');
-
-      document.body.appendChild(elsewhere);
-
-      windowGoesAway();
-      elsewhere.focus();
-      expect(document.activeElement).toBe(elsewhere);
-
-      windowComesBack();
-
-      expect(document.activeElement).toBe(input);
-
-      elsewhere.remove();
-    });
-
-    it('still reports a label the user leaves once the window is back', () => {
-      const { input } = renderComponent({ mark: { x: 1, y: 1, label: '' } });
-
-      windowGoesAway();
-      windowComesBack();
-      fireEvent.blur(input);
-
-      expect(onChange).toHaveBeenCalledWith('');
-    });
-  });
-
-  describe('onBlur', () => {
-    it('is called so the tool stops auto focusing the label', () => {
-      const { input } = renderComponent({ autoFocus: true, mark: { x: 1, y: 1, label: 'A' } });
-
-      fireEvent.blur(input);
-
-      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' } });
-
-      fireEvent.change(input, { target: { value: '' } });
-      fireEvent.blur(input);
-
-      expect(onChange).toHaveBeenCalledWith('');
-    });
-  });
-
-  describe('debounce', () => {
-    beforeEach(() => jest.useFakeTimers());
-    afterEach(() => jest.useRealTimers());
-
-    it('does not report the typed label before the debounce delay elapses', () => {
-      const { input } = renderComponent({ autoFocus: true });
-
-      fireEvent.change(input, { target: { value: 'A' } });
-
-      act(() => jest.advanceTimersByTime(499));
-      expect(onChange).not.toHaveBeenCalled();
-
-      act(() => jest.advanceTimersByTime(1));
-      expect(onChange).toHaveBeenCalledWith('A');
-    });
-
-    it('reports the label once for a burst of keystrokes', () => {
-      const { input } = renderComponent({ autoFocus: true });
-
-      fireEvent.change(input, { target: { value: 'A' } });
-      act(() => jest.advanceTimersByTime(300));
-      fireEvent.change(input, { target: { value: 'AB' } });
-      act(() => jest.advanceTimersByTime(300));
-      fireEvent.change(input, { target: { value: 'ABC' } });
-      act(() => jest.advanceTimersByTime(500));
-
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledWith('ABC');
-    });
-  });
-});
-
 describe('position', () => {
   const assertPosition = (mark, rect, expected) => {
     it(`${mark.x},${mark.y} + ${rect.width},${rect.height} => ${expected}`, () => {

package/src/mark-label.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { styled, useTheme } from '@mui/material/styles';
 import AutosizeInput from 'react-input-autosize';
@@ -7,18 +7,6 @@ import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import SvgIcon from './label-svg-icon';
 
-const DEBOUNCE_DELAY = 500;
-// A new label insists on the focus and the caret for this long, and again on each of the ticks
-// below. No single moment is reliable: the authoring host re-renders the whole element while it
-// saves, and the input is replaced under this component more than once. Nothing typed yet is what
-// tells a transient blur apart from the user leaving the label.
-const INSIST_ON_FOCUS_FOR = 500;
-const INSIST_AT = [0, 50, 120, 250, 400, 700, 1000];
-// how many times a label will do the heavier focus cycle to get a caret back
-const MAX_CARET_CYCLES = 3;
-// how wide an editable label input is while it is empty
-const EMPTY_INPUT_WIDTH = 30;
-
 const StyledInputCorrect = styled('div')(({ theme }) => ({
   float: 'right',
   padding: theme.spacing(0.5),
@@ -115,28 +103,7 @@ export const coordinates = (graphProps, mark, rect = { width: 0, height: 0 }, po
   }
 };
 
-/**
- * Whether the document's caret is in this input. The characters land at the caret, not at the
- * focused node - an input can be the active element with no caret anywhere, and then keypress fires
- * and nothing is inserted, with nothing in the page cancelling anything.
- */
-const caretIsInside = (node) => {
-  if (typeof document === 'undefined' || !document.getSelection) {
-    return true;
-  }
-
-  const selection = document.getSelection();
-
-  if (!selection || !selection.rangeCount || !selection.anchorNode) {
-    return false;
-  }
-
-  const anchor = selection.anchorNode;
-
-  return anchor === node || anchor === node.parentNode || node.contains(anchor);
-};
-
-const LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, minWidth, onChange, onBlur }) => (
+const LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, onChange, onBlur }) => (
   <AutosizeInput
     inputRef={(r) => {
       _ref(r);
@@ -144,7 +111,6 @@ const LabelInput = ({ _ref, externalInputRef, label, disabled, inputStyle, minWi
     }}
     disabled={disabled}
     inputStyle={inputStyle}
-    minWidth={minWidth}
     value={label}
     onChange={onChange}
     onBlur={onBlur}
@@ -157,196 +123,42 @@ LabelInput.propTypes = {
   label: PropTypes.string,
   disabled: PropTypes.bool,
   inputStyle: PropTypes.object,
-  minWidth: PropTypes.number,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
 };
 
 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) => {
-    inputNode.current = node;
-    setInput(node);
-  }, []);
+  const _ref = useCallback((node) => setInput(node));
   const theme = useTheme();
 
-  const { mark, graphProps, disabled, autoFocus, inputRef: externalInputRef } = props;
+  const { mark, graphProps, disabled, inputRef: externalInputRef } = props;
 
   const [label, setLabel] = useState(mark.label);
   const { correctness, correctnesslabel, correctlabel } = mark;
 
-  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);
-  // the whole window losing the focus is not the user leaving the label - another window, the
-  // devtools, or the host moving the focus while it saves. The window blur arrives before the
-  // input's own blur, so this flag is set by the time the label is asked to give itself up.
-  const windowAway = useRef(false);
-  // our own blur, from the focus cycle that puts a missing caret back
-  const selfFocusing = useRef(false);
-  const caretCycles = useRef(0);
-
   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() || windowAway.current || selfFocusing.current) {
-      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, mark.label, props.onChange, props.onBlur]);
+  }, [label, props.onChange]);
 
-  const debouncedLabel = useDebounce(label, DEBOUNCE_DELAY);
+  const debouncedLabel = useDebounce(label, 200);
 
-  // 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
+  // useState only sets the value once, to synch props to state need useEffect
   useEffect(() => {
-    if (isFocused()) {
-      return;
-    }
-
     setLabel(mark.label);
   }, [mark.label]);
 
   // pick up the change to debouncedLabel and save it
   useEffect(() => {
     if (typeof debouncedLabel === 'string' && debouncedLabel !== mark.label) {
-      saveLabel(debouncedLabel);
+      props.onChange(debouncedLabel);
     }
   }, [debouncedLabel]);
 
-  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) {
-      return;
-    }
-
-    const wasFocused = isFocused();
-
-    if (!wasFocused) {
-      node.focus();
-
-      // a new label is focused once, so it cannot fight over the focus with another one
-      if (isFocused()) {
-        isNewLabel.current = false;
-      }
-    }
-
-    if (!node.setSelectionRange) {
-      return;
-    }
-
-    // a label that was already being edited keeps the caret the user put in it; one that has just
-    // taken the focus gets it at the end, otherwise typing continues in front of the existing label
-    const keepCaret = wasFocused && node.value;
-    const start = keepCaret ? node.selectionStart : (node.value || '').length;
-    const end = keepCaret ? node.selectionEnd : start;
-
-    // The characters land at the document's caret, not at the focused node. An input focused while
-    // it was being replaced, or while the window was away, ends up as the active element with no
-    // caret anywhere: keypress fires and nothing is inserted, with nothing in the page cancelling
-    // anything. Re-asserting the range is what puts the caret back.
-    if (!caretIsInside(node)) {
-      node.setSelectionRange(start, end);
-    }
-
-    // and if it still is not there, a focus cycle is the heavier way to get it. Every focusInput
-    // call is another go at it - after each render, on each insist tick, and when the window comes
-    // back - up to a few times per label, since the state comes back as the input is replaced.
-    if (caretIsInside(node) || caretCycles.current >= MAX_CARET_CYCLES) {
-      return;
-    }
-
-    caretCycles.current += 1;
-    // our own blur, so the label is not given up over it
-    selfFocusing.current = true;
-    node.blur();
-    node.focus();
-    node.setSelectionRange(start, end);
-    selfFocusing.current = false;
-  };
-
-  // 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 (!insistUntil.current) {
-      insistUntil.current = Date.now() + INSIST_ON_FOCUS_FOR;
-    }
-
-    const timers = INSIST_AT.map((delay) => setTimeout(focusInput, delay));
-
-    return () => timers.forEach((t) => clearTimeout(t));
-  }, [autoFocus]);
-
-  // the blur that came with the window going away is ignored, so the label is still the one being
-  // edited when the window comes back and it takes the focus, and its selection, back
-  useEffect(() => {
-    const onWindowBlur = () => {
-      windowAway.current = true;
-    };
-
-    const onWindowFocus = () => {
-      // coming back only means something if the window went away: moving the focus from one element
-      // to another inside the page reaches window too in some implementations
-      if (!windowAway.current) {
-        return;
-      }
-
-      windowAway.current = false;
-      focusInput();
-    };
-
-    window.addEventListener('blur', onWindowBlur);
-    window.addEventListener('focus', onWindowFocus);
-
-    return () => {
-      window.removeEventListener('blur', onWindowBlur);
-      window.removeEventListener('focus', onWindowFocus);
-    };
-  }, [autoFocus]);
-
   const rect = input ? input.getBoundingClientRect() : { width: 0, height: 0 };
   const pos = position(graphProps, mark, rect);
   const leftTop = coordinates(graphProps, mark, rect, pos);
@@ -374,11 +186,6 @@ export const MarkLabel = (props) => {
       label={labelValue}
       disabled={disabledInput}
       inputStyle={inputStyle}
-      // an editable label sizes itself to its content, so an empty one is 2px wide: enough for the
-      // caret, not enough for anybody to see that the label is waiting to be typed into. Chrome
-      // does not blink the caret of an input inside an svg foreignObject, it only paints a hairline,
-      // so the box itself has to say that it has the focus.
-      minWidth={disabledInput ? 1 : EMPTY_INPUT_WIDTH}
       onChange={onChange}
       onBlur={handleBlur}
     />
@@ -423,19 +230,11 @@ 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>;
 };
 
 MarkLabel.propTypes = {
-  autoFocus: PropTypes.bool,
   disabled: PropTypes.bool,
-  onBlur: PropTypes.func,
   onChange: PropTypes.func,
   graphProps: types.GraphPropsType,
   inputRef: PropTypes.func,