[v12] fix(ui-checkbox): checkbox unfocuses on click - new v12

[git-nandor]

INSTUI-4768

Bug:

When a Checkbox is wrapped in a Focusable component, clicking the checkbox causes the Focusable to lose focus unexpectedly. The root cause is that the user clicks the label element (not the hidden input directly), and the browser interprets the mousedown on the label as a focus transfer — firing a blur event on the already-focused checkbox input.
Focusable's native DOM blur listener catches this immediately and sets focused: false

Fix:

Added an onMouseDown handler to the Checkbox label that calls e.preventDefault() to suppress the browser's default focus handling, then manually restores focus to the input.

Test plan:

Try this in the doc app:

function App() {
  const [isChecked, setIsChecked] = useState(false);
  const [textVal, setTextVal] = useState("");

  return (
    <>
      <Focusable>
        {({ focused }) =>
          focused ? (
            <Checkbox
              label="label"
              checked={isChecked}
              onChange={() => setIsChecked(!isChecked)}
            />
          ) : (
            <View tabIndex={0}>
              Focus for checkbox (checked: {isChecked.toString()})
            </View>
          )
        }
      </Focusable>
      <br />
      <Focusable>
        {({ focused }) =>
          focused ? (
            <TextInput
              label="label"
              value={textVal}
              onChange={(e) => {
                setTextVal(e.target.value);
              }}
            />
          ) : (
            <View tabIndex={0}>Focus for textInput (val: {textVal})</View>
          )
        }
      </Focusable>
    </>
  );
}

  render(<App />)

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2434/
Built to branch gh-pages at 2026-03-09 07:50 UTC. Preview will be ready when the GitHub Pages deployment is complete.