[checkbox] event.shiftkey always false

[cgatian]

Bug report

Current behavior

The eventDetails.event does not have the correct value for the shiftKey property. It always returns false.

Expected behavior

Clicking the checkbox while the shift key is pressed should set event.shiftKey to true.

<Checkbox.Root onCheckedChange={(_checked, eventDetails) => {
          const shift = (eventDetails.event as MouseEvent)?.shiftKey ?? false;
          console.log('shift', shift); // always false
}}>

Reproducible example

Stackblitz Repro

Base UI version

v1.1.0

Which browser are you using?

Edge

Which OS are you using?

Mac OS

Additional context

I was expecting eventDetails.event to be a React synthetic event which would have nativeEvent prop but it looks like it's a PointerEvent. Perhaps there's some underlying event forwarding happening? Sorry Im not quite sure. 😕

Ok yeah it looks Base UI clicks the input programatically, which most likely loses the React event details.

base-ui/packages/react/src/checkbox/root/CheckboxRoot.tsx

Lines 296 to 304 in 50e164e

	onClick(event: React.MouseEvent) {
	if (readOnly || disabled) {
	return;
	}
	event.preventDefault();
	inputRef.current?.click();
	},

Perhaps instead of calling click(), dispatch a SyntheticEvent preserving the original event's state:

onClick(event: React.MouseEvent) {
  if (readOnly || disabled) {
    return;
  }
  
  event.preventDefault();
  
  if (inputRef.current) {
    // Create a new MouseEvent with preserved keyboard state
    const syntheticEvent = new MouseEvent('click', {
      shiftKey: event.shiftKey,
      ctrlKey: event.ctrlKey,
      altKey: event.altKey,
      metaKey: event.metaKey,
    });
    
    inputRef.current.dispatchEvent(syntheticEvent);
  }
}

[mj12albert]

@cgatian Are you trying to implement shift-click to select a range of checkboxes? If so, possibly it can be worked around using onClick?

[cgatian]

Yes, this can be worked around by attaching an onMouseDown event handler to capture the event.shiftKey and storing it in a ref.

const shiftKeyRef = useRef(false);

const handleMouseDown = (event: React.MouseEvent) => {
      shiftKeyRef.current = event.shiftKey;
 };

const handleOnCheckedChange = (checked) => {
      onChecked(checked, shiftKey.current);
 };

<Checkbox
      onCheckedChange={handleOnCheckedChange}
      onMouseDown={handleMouseDown}
      checked={checked}
/>