fix: holding left click breaks mask

src/PickerInput/Selector/Input.tsx

@@ -334,16 +334,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 />);