Merge pull request #2552 from teamleadercrm/numeric-input-stepper-blu…

…rring

`NumericInput` - stepper blurring

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [19.1.1] - 2023-02-03
+
+### Fixed
+
+- `NumericInput`: Fix input blurring when using the stepper buttons ([@BeirlaenAaron](https://github.com/BeirlaenAaron)) in([#2552](https://github.com/teamleadercrm/ui/pull/2552))
+
 ## [19.1.0] - 2023-02-01
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "19.1.0",
+  "version": "19.1.1",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/input/NumericInput.tsx

@@ -1,4 +1,13 @@
-import React, { ChangeEvent, FocusEvent, forwardRef, KeyboardEvent, ReactElement, useEffect, useRef } from 'react';
+import React, {
+  ChangeEvent,
+  FocusEvent,
+  forwardRef,
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  useEffect,
+  useRef,
+} from 'react';
 import Icon from '../icon';
 import {
   IconAddSmallOutline,
@@ -16,7 +25,7 @@ import { GenericComponent } from '../../@types/types';
 interface StepperProps {
   disabled: boolean;
   onBlur: (event: FocusEvent<HTMLInputElement>) => void;
-  onMouseDown: () => void;
+  onMouseDown: (event: MouseEvent<HTMLButtonElement>) => void;
   onMouseUp: () => void;
   onMouseLeave: () => void;
 }
@@ -202,7 +211,9 @@ const NumericInput: GenericComponent<NumericInputProps> = forwardRef<HTMLElement
       handleClearStepperDecreaseTimer();
     }, [decreaseDisabled]);
 
-    const handleDecreaseMouseDown = () => {
+    const handleDecreaseMouseDown = (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+
       if (onDecreaseMouseDown) {
         onDecreaseMouseDown();
 
@@ -228,7 +239,9 @@ const NumericInput: GenericComponent<NumericInputProps> = forwardRef<HTMLElement
       }, 300);
     };
 
-    const handleIncreaseMouseDown = () => {
+    const handleIncreaseMouseDown = (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+
       if (onIncreaseMouseDown) {
         onIncreaseMouseDown();