fix: holding left click breaks mask

src/PickerInput/Selector/Input.tsx

@@ -97,6 +97,8 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   // ========================= Refs =========================
   const holderRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
+  // When mousedown get focus, defer selection to mouseUp so click position is used
+  const mouseDownRef = React.useRef(false);
 
   React.useImperativeHandle(ref, () => ({
     nativeElement: holderRef.current,
@@ -153,6 +155,12 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   };
 
   const onFormatPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    // Block paste until selection is set (after mouseUp when focus was by mousedown)
+    if (mouseDownRef.current) {
+      event.preventDefault();
+      return;
+    }
+
     // Get paste text
     const pasteText = event.clipboardData.getData('text');
 
@@ -164,8 +172,6 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   // ======================== Mouse =========================
   // When `mouseDown` get focus, it's better to not to change the selection
   // Since the up position maybe not is the first cell
-  const mouseDownRef = React.useRef(false);
-
   const onFormatMouseDown: React.MouseEventHandler<HTMLInputElement> = () => {
     mouseDownRef.current = true;
   };
@@ -225,6 +231,25 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
 
     const { key } = event;
 
+    // Block mask editing until selection is set (after mouseUp when focus was by mousedown).
+    // Still allow shared handlers (onKeyDown, Enter submit) above to run.
+    if (mouseDownRef.current) {
+      const shouldBlock =
+        key.length === 1 ||
+        key === 'Backspace' ||
+        key === 'Delete' ||
+        key === 'ArrowLeft' ||
+        key === 'ArrowRight' ||
+        key === 'ArrowUp' ||
+        key === 'ArrowDown';
+
+      if (shouldBlock) {
+        event.preventDefault();
+      }
+
+      return;
+    }
+
     // Save the cache with cell text
     let nextCellText: string = null;
 
@@ -334,16 +359,21 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   const rafRef = React.useRef<number>();
 
   useLayoutEffect(() => {
-    if (!focused || !format || mouseDownRef.current) {
+    if (!focused || !format) {
       return;
     }
 
-    // Reset with format if not match
+    // Reset with format if not match (always apply when focused so mask works when focusing by mousedown)
     if (!maskFormat.match(inputValue)) {
       triggerInputChange(format);
       return;
     }
 
+    // When mousedown get focus, defer selection to mouseUp so click position is used
+    if (mouseDownRef.current) {
+      return;
+    }
+
     // Match the selection range
     inputRef.current.setSelectionRange(selectionStart, selectionEnd);
 

tests/new-range.spec.tsx

@@ -1010,6 +1010,19 @@ describe('NewPicker.Range', () => {
       expect(startInput.selectionEnd).toEqual(6);
     });
 
+    it('focus by mousedown defers selection sync to mouseUp', () => {
+      const { container } = render(<Demo />);
+
+      const startInput = container.querySelectorAll<HTMLInputElement>('input')[0];
+
+      fireEvent.mouseDown(startInput);
+      fireEvent.focus(startInput);
+
+      fireEvent.mouseUp(startInput);
+      expect(startInput.selectionStart).toBeDefined();
+      expect(startInput.selectionEnd).toBeDefined();
+    });
+
     it('blur to reset back text', async () => {
       const { container } = render(<Demo />);