Fix primefaces#5609: ToggleButton focusedState

melloware · Jan 9, 2024 · 8f174ee · 8f174ee
1 parent 185fac9
commit 8f174ee
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
@@ -982,14 +982,14 @@ const Tailwind = {
         transition: TRANSITIONS.overlay
     },
     togglebutton: {
-        root: ({ props, context }) => ({
+        root: ({ props, state }) => ({
             className: classNames(
                 'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
                 'px-4 py-3 rounded-md text-base w-36',
                 'border transition duration-200 ease-in-out',
-                // {
-                //     'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
-                // },
+                {
+                    'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': state.focused
+                },
                 {
                     'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80':
                         !props.checked,

diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
@@ -1,19 +1,23 @@
 import * as React from 'react';
 import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMountEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
 import { Tooltip } from '../tooltip/Tooltip';
 import { DomHandler, IconUtils, ObjectUtils, mergeProps } from '../utils/Utils';
 import { ToggleButtonBase } from './ToggleButtonBase';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const ToggleButton = React.memo(
     React.forwardRef((inProps, ref) => {
+        const [focusedState, setFocusedState] = React.useState(false);
         const context = React.useContext(PrimeReactContext);
         const props = ToggleButtonBase.getProps(inProps, context);
         const elementRef = React.useRef(null);
         const { ptm, cx, isUnstyled } = ToggleButtonBase.setMetaData({
-            props
+            props,
+            state: {
+                focused: focusedState
+            }
         });
 
         useHandleStyle(ToggleButtonBase.css.styles, isUnstyled, { name: 'togglebutton' });
@@ -43,6 +47,16 @@ export const ToggleButton = React.memo(
             }
         };
 
+        const onFocus = (event) => {
+            setFocusedState(true);
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            setFocusedState(false);
+            props.onBlur && props.onBlur(event);
+        };
+
         const onKeyDown = (event) => {
             if (event.keyCode === 32) {
                 toggle(event);
@@ -95,8 +109,8 @@ export const ToggleButton = React.memo(
                 className: cx('root', { hasIcon, hasLabel }),
                 style: props.style,
                 onClick: toggle,
-                onFocus: props.onFocus,
-                onBlur: props.onBlur,
+                onFocus: onFocus,
+                onBlur: onBlur,
                 onKeyDown: onKeyDown,
                 tabIndex: tabIndex,
                 role: 'button',