fix(toggleswitch): disable + checked state and deprecated html event …

…replacement (themesberg#987)

* docs: add disabled+active toggleswitch example

* fix(toggleswitch): fix state and replace onkeypress with onkeyup

This commit fixes the state for disable + enabled ToggleSwitch and also replaces the deprecated
onKeyPress with onKeyDown

fix themesberg#986

* fix(toggleswitch): remove unused event

* refactor(toggleswitch): remove dead code

app/docs/components/forms/forms.mdx

@@ -456,6 +456,7 @@ Use the `<ToggleSwitch>` component to ask users to enable or disable an option s
     <ToggleSwitch checked={props.switch1} label="Toggle me" onChange={props.setSwitch1} />
     <ToggleSwitch checked={props.switch2} label="Toggle me (checked)" onChange={props.setSwitch2} />
     <ToggleSwitch checked={false} disabled label="Toggle me (disabled)" onChange={() => undefined} />
+    <ToggleSwitch checked={true} disabled label="Toggle me (disabled)" onChange={() => undefined} />
     <ToggleSwitch checked={props.switch3} onChange={props.setSwitch3} />
   </div>
 </CodePreview>

src/components/ToggleSwitch/ToggleSwitch.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, FC, KeyboardEvent, MouseEvent } from 'react';
+import type { ComponentProps, FC, KeyboardEvent } from 'react';
 import { useId } from 'react';
 import { twMerge } from 'tailwind-merge';
 import type { DeepPartial, FlowbiteBoolean, FlowbiteColors } from '../../';
@@ -47,13 +47,14 @@ export const ToggleSwitch: FC<ToggleSwitchProps> = ({
 
   const toggle = (): void => onChange(!checked);
 
-  const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {
-    event.preventDefault();
+  const handleClick = (): void => {
     toggle();
   };
 
-  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>): void => {
-    event.preventDefault();
+  const handleOnKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {
+    if (event.code == 'Enter') {
+      event.preventDefault();
+    }
   };
 
   return (
@@ -67,7 +68,7 @@ export const ToggleSwitch: FC<ToggleSwitchProps> = ({
         disabled={disabled}
         id={`${id}-flowbite-toggleswitch`}
         onClick={handleClick}
-        onKeyPress={handleKeyPress}
+        onKeyDown={handleOnKeyDown}
         role="switch"
         tabIndex={0}
         type="button"
@@ -79,7 +80,7 @@ export const ToggleSwitch: FC<ToggleSwitchProps> = ({
           className={twMerge(
             theme.toggle.base,
             theme.toggle.checked[checked ? 'on' : 'off'],
-            !disabled && checked && theme.toggle.checked.color[color],
+            checked && theme.toggle.checked.color[color],
           )}
         />
         {label?.length ? (