Skip to content

fix(radio): emit form-friendly onChange on RadioGroup for RHF #5821

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ariansj01 wants to merge 4 commits into from
Closed

fix(radio): emit form-friendly onChange on RadioGroup for RHF #5821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
228d1c2
docs(date-range-picker): fix React import and add troubleshooting
ariansj01 Oct 10, 2025
d5a5b86
docs(date-range-picker): fix React import and add troubleshooting
ariansj01 Oct 10, 2025
e126a87
fix(toast): remove delay when disableAnimation is true
ariansj01 Oct 12, 2025
2c5bb9b
fix(radio): emit form-friendly onChange on RadioGroup for RHF
ariansj01 Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion apps/docs/content/components/date-range-picker/presets.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,13 @@ export default function App() {
}
calendarProps={{
focusedValue: value.start,
onFocusChange: (val) => setValue({...value, start: val}),
onFocusChange: (val) => {
if (val === "start") {
setValue({...value, start: val});
} else if (val === "end") {
setValue({...value, end: val});
}
},
Comment on lines +99 to +105
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: onFocusChange incorrectly overwrites date values with strings.

The val parameter in onFocusChange represents the focus state ("start" or "end"), not a date value. Lines 101 and 103 incorrectly set start: val and end: val, which overwrites the date objects with strings.

Apply this fix to preserve the actual date values:

-onFocusChange: (val) => {
-  if (val === "start") {
-    setValue({...value, start: val});
-  } else if (val === "end") {
-    setValue({...value, end: val});
-  }
-},
+onFocusChange: (focusedValue) => {
+  // onFocusChange receives the new focused date value, not a string
+  // Update the corresponding date in the range
+  setValue((prev) => ({
+    ...prev,
+    // The focusedValue is the actual date being focused
+    ...(value.start.compare(focusedValue) === 0 ? {} : { start: focusedValue }),
+    ...(value.end.compare(focusedValue) === 0 ? {} : { end: focusedValue }),
+  }));
+},

Or, if the intent is only to track which field has focus (not update dates), remove the handler entirely or use a different callback.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In apps/docs/content/components/date-range-picker/presets.raw.jsx around lines
99-105, the onFocusChange handler is incorrectly assigning the focus string to
the start/end date fields (overwriting date objects). Fix by preserving the
existing date values and storing the focus state instead (e.g., update a
dedicated focus property or state) or remove the handler if only focus tracking
is needed; ensure setValue spreads the existing value and only updates a
non-date focus key rather than assigning val to start/end.

nextButtonProps: {
variant: "bordered",
},
Expand Down
44 changes: 43 additions & 1 deletion apps/docs/content/docs/components/date-range-picker.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,48 @@ You can customize the `DateRangePicker` component by passing custom Tailwind CSS

<Spacer y={4} />

## Troubleshooting

### Common Issues

#### onFocusChange only updates start date
When using `onFocusChange` in DateRangePicker, make sure to handle both start and end date focus changes properly:

```jsx
// ❌ Wrong - only updates start date
onFocusChange: (val) => setValue({...value, start: val}),

// ✅ Correct - handles both start and end focus
onFocusChange: (val) => {
if (val === "start") {
setValue({...value, start: val});
} else if (val === "end") {
setValue({...value, end: val});
}
},
```
Comment on lines +372 to +384
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: Documentation example has the same bug as the code.

The "correct" example still contains the critical error identified in presets.raw.jsx. Lines 379 and 381 set start: val and end: val, where val is the focus state string ("start" or "end"), not a date value. This overwrites date objects with strings.

The documentation needs to be corrected to show the proper usage. Based on the actual onFocusChange API, this callback receives the focused date value (not a string identifier). The example should be:

-// ✅ Correct - handles both start and end focus
-onFocusChange: (val) => {
-  if (val === "start") {
-    setValue({...value, start: val});
-  } else if (val === "end") {
-    setValue({...value, end: val});
-  }
-},
+// ✅ Correct - onFocusChange receives the focused date value
+onFocusChange: (focusedValue) => {
+  // focusedValue is the date that now has focus
+  // Typically you only need this for advanced use cases
+  // For basic range selection, this handler is often not needed
+},

Alternatively, if the Troubleshooting section is addressing a different issue, please clarify what onFocusChange is supposed to do in this context.

🤖 Prompt for AI Agents 
In apps/docs/content/docs/components/date-range-picker.mdx around lines 372 to
384, the "correct" example mistakenly assigns start/end to val (a focus
identifier) and thus overwrites date objects with strings; update the snippet so
the focus identifier and the focused date value are treated separately — rename
the date param (e.g., focusedDate) and use the focus flag to decide which field
to update, calling setValue({...value, start: focusedDate}) when focus is start
and setValue({...value, end: focusedDate}) when focus is end, ensuring you do
not assign the focus string to the date fields.


#### Missing React import
Make sure to import React when using DateRangePicker in your components:

```jsx
import React from "react";
import {DateRangePicker} from "@heroui/react";
```

#### Date range not updating properly
Ensure you're using the correct value structure for date ranges:

```jsx
// ✅ Correct structure
const [value, setValue] = useState({
start: today(getLocalTimeZone()),
end: today(getLocalTimeZone()).add({days: 7})
});
```

<Spacer y={4} />

## API

### DateRangePicker Props
Expand Down Expand Up @@ -684,7 +726,7 @@ You can customize the `DateRangePicker` component by passing custom Tailwind CSS
{
attribute: "onFocusChange",
type: "(isFocused: boolean) => void",
description: "Handler that is called when the element's focus status changes.",
description: "Handler that is called when the element's focus status changes. **Important**: When using this with DateRangePicker, make sure to handle both start and end date focus changes properly to avoid losing the end date selection.",
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Oct 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify the onFocusChange API behavior and update documentation accordingly.

The updated description suggests handling "both start and end date focus changes" but may be based on incorrect assumptions about the onFocusChange API.

Please verify the actual signature and behavior of onFocusChange in the DateRangePicker component:

Once verified, update the description to accurately reflect the API's actual behavior.

🏁 Script executed:

#!/bin/bash
# Search for onFocusChange implementation in DateRangePicker
ast-grep --pattern $'onFocusChange: ($$$) => {
  $$$
}'

# Find the type definition for onFocusChange
rg -nP --type=ts -C5 'onFocusChange.*:.*\('

Length of output: 2161

🏁 Script executed:

#!/bin/bash
# Find DateRangePicker component
fd -e ts -e tsx 'date-range-picker' --type f | grep -E '(src|component)' | head -20

# Search for onFocusChange in date-picker package
rg -n 'onFocusChange' packages/components/date-picker/src/ -A2 -B2 --type ts --type tsx

Length of output: 296

🏁 Script executed:

#!/bin/bash
# Inspect DateRangePicker component
cat git/packages/components/date-picker/src/date-range-picker.tsx | head -150

# Look for Calendar props interface
rg -n 'calendarProps' git/packages/components/date-picker/src/ -A5 -B2

Length of output: 174

🏁 Script executed:

#!/bin/bash
# Search for onFocusChange definition
rg -n 'onFocusChange' git/packages/components/date-picker/src/ -B3 -A3

Length of output: 80

🏁 Script executed:

#!/bin/bash
# Inspect DateRangePicker component with correct path
cat packages/components/date-picker/src/date-range-picker.tsx | head -200

# Search for onFocusChange in date-picker component files
rg -n 'onFocusChange' packages/components/date-picker/src/ -B3 -A3

Length of output: 4003

🏁 Script executed:

#!/bin/bash
# Search use-date-range-picker for onFocusChange
cat packages/components/date-picker/src/use-date-range-picker.ts | grep -n 'onFocusChange' -B5 -A5

# Check RangeCalendar component
fd -e tsx -e ts 'range-calendar' packages/components/ 

# Search all onFocusChange references in date-picker
rg 'onFocusChange' packages/components/date-picker/

Length of output: 2406

🏁 Script executed:

#!/bin/bash
# Inspect RangeCalendar component
cat packages/components/calendar/src/range-calendar.tsx | head -200

# Search use-range-calendar for onFocusChange type definition
rg -n 'onFocusChange' packages/components/calendar/src/use-range-calendar.ts -B3 -A3

Length of output: 1089

🏁 Script executed:

#!/bin/bash
# Get full use-range-calendar.ts file to find interface definition
cat packages/components/calendar/src/use-range-calendar.ts | head -300

# Also search for UseRangeCalendarProps interface
rg -n 'interface UseRangeCalendarProps|export.*UseRangeCalendarProps' packages/components/calendar/src/use-range-calendar.ts -A20

Length of output: 4479

🌐 Web query:

React Aria RangeCalendar onFocusChange callback signature

💡 Result:

The RangeCalendar onFocusChange signature is:
(date: CalendarDate) => void. [1][2]

Sources: React Aria RangeCalendar docs. [1][2]

Update onFocusChange description to reflect accurate API behavior.

The documented description is incorrect. React Aria's RangeCalendar onFocusChange receives a single CalendarDate parameter, not separate start/end parameters. The current description suggesting developers must "handle both start and end date focus changes" is misleading and inconsistent with the actual API.

The callback simply tracks which date is focused in the calendar—the developer controls how to apply that focused date to their state (e.g., assign to start date if empty, otherwise to end date).

Replace the description with:

Handler that is called when the focused date in the calendar changes. Receives the newly focused date as a parameter.
🤖 Prompt for AI Agents 
In apps/docs/content/docs/components/date-range-picker.mdx around line 729, the
onFocusChange description incorrectly states it handles start/end focus changes;
update the string to accurately describe the API by replacing the current
sentence with: "Handler that is called when the focused date in the calendar
changes. Receives the newly focused date as a parameter." Ensure the new text
replaces the existing description exactly and preserves surrounding punctuation
and formatting.

default: "-"
},
{
Expand Down
Loading
Loading