emilkowalski / sonner

An opinionated toast component for React.

Home Page:https://sonner.emilkowal.ski

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 πŸ”:

  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.
commented

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.