Merge pull request #2445 from teamleadercrm/bring-back-button-blur

Bring back button blur

CHANGELOG.md

@@ -4,8 +4,6 @@
 
 ### Changed
 
-- `Select`: Adjust margins in dropdown when option groups are used ([@lorgan3](https://github.com/lorgan3)) in [#2440](https://github.com/teamleadercrm/ui/pull/2440))
-
 ### Deprecated
 
 ### Removed
@@ -14,6 +12,13 @@
 
 ### Dependency updates
 
+## [17.0.1] - 2022-11-16
+
+### Changed
+
+- `Select`: Adjust margins in dropdown when option groups are used ([@lorgan3](https://github.com/lorgan3)) in [#2440](https://github.com/teamleadercrm/ui/pull/2440))
+- `Button`: Blur the button again after clicking on it ([@lorgan3](https://github.com/lorgan3)) in [#2445](https://github.com/teamleadercrm/ui/pull/2445))
+
 ## [17.0.0] - 2022-11-15
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/button/Button.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
+import React, { forwardRef, ReactNode, useImperativeHandle, useRef } from 'react';
 import { GenericComponent } from '../../@types/types';
 import { COLORS, SIZES } from '../../constants';
 import Box from '../box';
@@ -48,6 +48,10 @@ export interface ButtonProps extends Omit<BoxProps, 'size'> {
   label?: string;
   /** Determines which kind of button to be rendered. */
   level?: `${BUTTON_LEVELS}`;
+  /** Callback function that is fired when mouse leaves the component. */
+  onMouseLeave?: (event: React.MouseEvent) => void;
+  /** Callback function that is fired when the mouse button is released. */
+  onMouseUp?: (event: React.MouseEvent) => void;
   /** If true, component will show a loading spinner instead of label or children. */
   processing?: boolean;
   /** Size of the button. */
@@ -74,11 +78,37 @@ const Button: GenericComponent<ButtonProps> = forwardRef<HTMLElement, ButtonProp
       level = BUTTON_LEVELS.secondary,
       size = 'medium',
       type = 'button',
+      onMouseUp,
+      onMouseLeave,
       processing = false,
       ...others
     },
     ref,
   ) => {
+    const buttonRef = useRef<HTMLElement>(null);
+    useImperativeHandle<HTMLElement | null, HTMLElement | null>(ref, () => buttonRef.current);
+
+    const blur = () => {
+      const currentButtonRef = buttonRef.current;
+      if (currentButtonRef?.blur) {
+        currentButtonRef.blur();
+      }
+    };
+
+    const handleMouseUp = (event: React.MouseEvent) => {
+      blur();
+      if (onMouseUp) {
+        onMouseUp(event);
+      }
+    };
+
+    const handleMouseLeave = (event: React.MouseEvent) => {
+      blur();
+      if (onMouseLeave) {
+        onMouseLeave(event);
+      }
+    };
+
     const getSpinnerColor = () => {
       switch (level) {
         case BUTTON_LEVELS.secondary:
@@ -142,8 +172,10 @@ const Button: GenericComponent<ButtonProps> = forwardRef<HTMLElement, ButtonProp
         data-teamleader-ui="button"
         disabled={element === 'button' ? disabled : undefined}
         element={element}
-        ref={ref}
+        ref={buttonRef}
         type={element === 'button' ? type : undefined}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
       >
         {icon && iconPlacement === 'left' && icon}
         {(label || children) && (