Skip to content

Fix: Toast disableAnimation Not Respecting Immediate Close #5804

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

Open
wants to merge 3 commits into
base: canary
Choose a base branch
from
+35,913 −3,413
Open

Fix: Toast disableAnimation Not Respecting Immediate Close #5804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 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
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
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Critical logic error: onFocusChange incorrectly assigns string to date value.

The code checks if val === "start" or val === "end", but then directly assigns val to the date fields. This will set value.start or value.end to the string "start" or "end" instead of a valid date value, breaking the DateRangePicker.

Based on React Aria's RangeCalendar API, onFocusChange receives a DateValue (the newly focused date), not a focus indicator string. The conditional checks for string equality are incorrect.

Apply this diff to fix the logic:

-        onFocusChange: (val) => {
-          if (val === "start") {
-            setValue({...value, start: val});
-          } else if (val === "end") {
-            setValue({...value, end: val});
-          }
-        },
+        onFocusChange: (val) => {
+          setValue({...value, start: val});
+        },

If you need to track which field (start or end) is focused, use a separate state variable or the calendar's built-in focus management rather than inspecting the date value.

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, onFocusChange currently treats its argument as a focus indicator string
and assigns "start"/"end" into the date fields, which is wrong; replace this
logic so onFocusChange treats val as a DateValue (or null) and does not assign
literal strings into value.start/value.end — either update a separate
focus-tracking state (e.g., focusedField = "start" | "end") and use that to
decide which date field to update elsewhere, or if the intent was only to track
focus, set a focusedDate/focusedField state instead of mutating the date range;
remove the string-equality checks and only assign DateValue objects to date
fields (or avoid assigning here entirely and update dates via the proper
onChange handler).

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 +369 to +384
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Documentation example contains the same logic error as the implementation.

The "correct" example shows the same bug present in presets.raw.jsx: checking if val === "start" or val === "end", then assigning val directly to the date fields. This treats val as both a focus indicator (string) and a date value, which is incorrect.

Based on React Aria's RangeCalendar API, onFocusChange receives a DateValue (the newly focused date cell), not a string indicator. The example will cause value.start or value.end to be set to the literal strings "start" or "end".

Update the documentation to show the correct pattern:

-#### 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});
-  }
-},
-```
+#### onFocusChange receives DateValue, not a focus indicator
+When using `onFocusChange` in RangeCalendar, the callback receives the newly focused `DateValue`:
+
+```jsx
+// ✅ Correct - updates the focused value
+onFocusChange: (val) => {
+  setValue({...value, start: val});
+},
+```
+
+If you need to track whether the start or end field is focused, use `calendarProps.focusedValue` to determine which field should be updated, or manage focus state separately.
🤖 Prompt for AI Agents 
In apps/docs/content/docs/components/date-range-picker.mdx around lines 369 to
384, the docs incorrectly treat the onFocusChange callback value as a focus
indicator string and assign it to start/end; instead update the text and example
to state that onFocusChange receives a DateValue (the newly focused date cell)
and show a correct pattern that sets the appropriate date field (e.g.,
setValue({...value, start: val}) for the focused start), and add guidance to use
calendarProps.focusedValue or separate focus state if you need to know whether
start or end is focused; replace the broken examples with this corrected
explanation and example.


#### 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
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Inconsistent with the flawed troubleshooting example.

The warning about handling both start and end date focus changes aligns with the incorrect troubleshooting example above (lines 377-384), which contains the same logic error as the implementation.

Update this description to accurately reflect the correct onFocusChange behavior:

-      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.",
+      description: "Handler that is called when the element's focus status changes. The callback receives a `DateValue` representing the newly focused date in the calendar.",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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.",
description: "Handler that is called when the element's focus status changes. The callback receives a `DateValue` representing the newly focused date in the calendar.",
🤖 Prompt for AI Agents 
In apps/docs/content/docs/components/date-range-picker.mdx around line 729, the
description for onFocusChange repeats the flawed troubleshooting logic and
misstates behavior; update the text to clearly describe the actual onFocusChange
contract: it receives the new focused input value (e.g., 'startDate', 'endDate'
or null), callers should update their focusedInput state to that value (not
toggle or infer the other field), and ensure focus changes do not inadvertently
clear or overwrite the other date value — replace the warning with concise
guidance on handling the focusedInput value directly and preserving start/end
date values.

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