The "dismissible" prop has no effect
siiiiilvio opened this issue Β· comments
Describe the feature / bug π:
Using a variety of functions, such as toast() or toast.custom(), whether passing a jsx component or otherwise, adding the dismissible prop has no effect.
Steps to reproduce the bug π:
- In terminal:
npx create-react-app sonner && cd sonner
npm i sonner
- In greenfield project (App.js):
import logo from './logo.svg';
import './App.css';
import { toast } from 'sonner';
import { Toaster } from 'sonner';
function App() {
return (
<div className="App">
<Toaster />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<button onClick={() => toast(<div>A custom toast with default styling</div>, { dismissible: false })}>Trigger toast</button>
</header>
</div>
);
}
export default App;
- Click button.
- Toast is dismissed after default duration.
I have the same issue at v1.4.41
. I would prefer to not have to set duration as something very long just to have the toast stick around stay until being dismissed. (I know that sonner is opinionated and maybe this preference is not compatible with the vision). I checked the docs to make sure.
This bug concerns dismissible set as false though but the reproduction mentions the duration. I would like a dismissible prop with infinite duration. EDIT: Using { duration: Infinity }
does seem to achieve this.