emilkowalski / sonner

An opinionated toast component for React.
https://sonner.emilkowal.ski
MIT License
7.69k stars 237 forks source link

The "dismissible" prop has no effect #434

Open siiiiilvio opened 3 weeks ago

siiiiilvio commented 3 weeks ago

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 🔁:

  1. In terminal: npx create-react-app sonner && cd sonner
  2. npm i sonner
  3. 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;
  1. Click button.
  2. Toast is dismissed after default duration.
axelhj commented 3 weeks ago

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.