fix: incorrectly behavior when click radio label (#160)

RSSNext · Jul 28, 2024 · 5ff0d3d · 5ff0d3d
1 parent 2ef9806
commit 5ff0d3d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/src/renderer/src/components/ui/radio-group/Radio.tsx b/src/renderer/src/components/ui/radio-group/Radio.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@renderer/lib/utils"
 import type { FC, ReactNode } from "react"
+import { useId } from "react"
 import { useEventCallback } from "usehooks-ts"
 
 import { useRadioContext, useRadioGroupValue } from "./context"
@@ -15,7 +16,8 @@ export const Radio: FC<
 > = (props) => {
   const { id, label, className, wrapperClassName, value, onChange, ...rest } =
     props
-  const { groupId, onChange: ctxOnChange } = useRadioContext() || {}
+  const { onChange: ctxOnChange } = useRadioContext() || {}
+  const fallbackId = useId()
 
   const ctxValue = useRadioGroupValue()
 
@@ -29,7 +31,7 @@ export const Radio: FC<
       <input
         {...rest}
         type="radio"
-        id={groupId || id}
+        id={id ?? fallbackId}
         className={cn(
           "radio radio-primary radio-sm disabled:radio-current disabled:cursor-not-allowed disabled:text-theme-disabled",
           className,
@@ -43,7 +45,7 @@ export const Radio: FC<
         className={cn(
           rest.disabled ? "text-theme-disabled" : "",
         )}
-        htmlFor={groupId || id}
+        htmlFor={id ?? fallbackId}
       >
         {label}
       </label>

diff --git a/src/renderer/src/components/ui/radio-group/RadioCard.tsx b/src/renderer/src/components/ui/radio-group/RadioCard.tsx
@@ -1,5 +1,6 @@
 import { cn } from "@renderer/lib/utils"
 import type { FC, ReactNode } from "react"
+import { useId } from "react"
 import { useEventCallback } from "usehooks-ts"
 
 import { useRadioContext, useRadioGroupValue } from "./context"
@@ -15,7 +16,8 @@ export const RadioCard: FC<
 > = (props) => {
   const { id, label, className, wrapperClassName, value, onChange, ...rest } =
     props
-  const { groupId, onChange: ctxOnChange } = useRadioContext() || {}
+  const { onChange: ctxOnChange } = useRadioContext() || {}
+  const fallbackId = useId()
 
   const ctxValue = useRadioGroupValue()
 
@@ -29,7 +31,7 @@ export const RadioCard: FC<
 
   return (
     <label
-      id={groupId || id}
+      htmlFor={id ?? fallbackId}
       className={cn(
         "flex cursor-pointer items-center rounded-md p-2",
         "border",
@@ -41,7 +43,7 @@ export const RadioCard: FC<
       )}
     >
       <input
-        id={id}
+        id={id ?? fallbackId}
         type="radio"
         className={cn("hidden size-0", className)}
         value={value}

diff --git a/src/renderer/src/components/ui/radio-group/RadioGroup.tsx b/src/renderer/src/components/ui/radio-group/RadioGroup.tsx
@@ -1,12 +1,11 @@
-import { useId, useMemo, useRef, useState } from "react"
+import { useMemo, useRef, useState } from "react"
 
 import { RadioGroupContextProvider, RadioGroupValueProvider } from "./context"
 
 export const RadioGroup: Component<{
   value?: string
   onValueChange?: (value: string) => void
 }> = (props) => {
-  const id = useId()
   const { onValueChange, value } = props
 
   const stableOnValueChange = useRef(onValueChange).current
@@ -16,13 +15,12 @@ export const RadioGroup: Component<{
     <RadioGroupContextProvider
       value={useMemo(
         () => ({
-          groupId: id,
           onChange(value) {
             setCurrentValue(value)
             stableOnValueChange?.(value)
           },
         }),
-        [id, stableOnValueChange],
+        [stableOnValueChange],
       )}
     >
       <RadioGroupValueProvider value={currentValue}>

diff --git a/src/renderer/src/components/ui/radio-group/context.ts b/src/renderer/src/components/ui/radio-group/context.ts
@@ -1,7 +1,6 @@
 import { createContext, useContext } from "react"
 
 interface RadioContext {
-  groupId: string
   onChange: (value: string) => void
 
 }