Repository: motion-canvas/motion-canvas
File: packages/ui/src/components/controls/NumberInput.tsx (TypeScript)

Code before:
        const newValue = clamp(min, max, value + event.movementX * step);
        handleChange?.(newValue);
        return newValue;
      });
    },
    [min, max, step],
  );

  useDocumentEvent('pointerlockchange', () => {
    if (document.pointerLockElement === inputRef.current) {
      document.addEventListener('pointermove', handleDrag);
    } else {
      document.removeEventListener('pointermove', handleDrag);
    }
  });

  return (
    <input
      type={'number'}
      ref={inputRef}
      min={min}
      max={max}
      step={step}
      value={currentValue}
      onChangeCapture={event => {
        const value = parseInt((event.target as HTMLInputElement).value);
        handleChangeCapture?.(value);
      }}
      onChange={event => {
        const value = parseInt((event.target as HTMLInputElement).value);
        console.log(value);

        handleChange?.(value);
      }}
      onPointerDown={event => {
        if (!active && event.button === MouseButton.Left) {
          event.preventDefault();
          event.stopPropagation();
          event.currentTarget.setPointerCapture(event.pointerId);

          setStartX(event.clientX);
        }
      }}
      onPointerMove={event => {
        if (!active && event.currentTarget.hasPointerCapture(event.pointerId)) {
          event.preventDefault();
          event.stopPropagation();

          if (Math.abs(startX - event.clientX) > 5) {
            inputRef.current.requestPointerLock();
          }

Review comment (suggestion):
In the component you use `inputRef.current` and `event.target` somewhat randomly, I think we should stick to one.
```suggestion
        const value = parseInt(inputRef.current.value);
```


Code after:
  useDocumentEvent(
    'pointerlockchange',
    useCallback(() => {
      if (document.pointerLockElement === inputRef.current) {
        document.addEventListener('pointermove', handleDrag);
      } else {
        document.removeEventListener('pointermove', handleDrag);
      }
    }, [handleDrag]),
  );

  return (
    <input
      type={'number'}
      ref={inputRef}
      min={min}
      max={max}
      step={step}
      value={currentValue}
      onChangeCapture={() => onChange?.(parseInt(inputRef.current.value))}
      onPointerDown={event => {
        if (
          document.activeElement !== inputRef.current &&
          event.button === MouseButton.Left
        ) {
          event.preventDefault();
          event.stopPropagation();
          event.currentTarget.setPointerCapture(event.pointerId);

          setStartX(event.clientX);
        }
      }}
      onPointerMove={event => {
        if (
          document.activeElement !== inputRef.current &&
          event.currentTarget.hasPointerCapture(event.pointerId)
        ) {
          event.preventDefault();
          event.stopPropagation();

          if (Math.abs(startX - event.clientX) > 5) {
            inputRef.current.requestPointerLock();
          }
        }
      }}
      onPointerUp={event => {
        if (event.button === MouseButton.Left) {
          event.stopPropagation();
          event.currentTarget.releasePointerCapture(event.pointerId);

          if (document.pointerLockElement === inputRef.current) {