From 0deb34901be5511181b9f58828c66394d9244c27 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 18 Dec 2023 10:55:06 -0500
Subject: [PATCH] Fix #5609: ToggleButton focusedState

---
 .../doc/togglebutton/theming/tailwinddoc.js   |  4 ++--
 components/lib/passthrough/tailwind/index.js  |  8 +++----
 components/lib/togglebutton/ToggleButton.js   | 22 +++++++++++++++----
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/components/doc/togglebutton/theming/tailwinddoc.js b/components/doc/togglebutton/theming/tailwinddoc.js
index a00e7fa17a..d1a59b9e77 100644
--- a/components/doc/togglebutton/theming/tailwinddoc.js
+++ b/components/doc/togglebutton/theming/tailwinddoc.js
@@ -7,13 +7,13 @@ export function TailwindDoc(props) {
         basic: `
 const Tailwind = {
     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':
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index d24daac5b4..1d37321827 100644
--- 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
index 9b48bc3b04..12d9c7cc4d 100644
--- 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 context = React.useContext(PrimeReactContext);
         const props = ToggleButtonBase.getProps(inProps, context);
         const elementRef = React.useRef(null);
+        const [focusedState, setFocusedState] = React.useState(false);
         const { ptm, cx, isUnstyled } = ToggleButtonBase.setMetaData({
-            props
+            props,
+            state: {
+                focused: focusedState
+            }
         });
 
         useHandleStyle(ToggleButtonBase.css.styles, isUnstyled, { name: 'togglebutton' });
@@ -50,6 +54,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 createIcon = () => {
             if (hasIcon) {
                 const iconProps = mergeProps(
@@ -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',