Blink/Flash - Sonner

[MagicKitty]

Please provide the environment you discovered this bug in.

{
"dependencies": {
"@angular/animations": "19.0.5",
"@angular/common": "19.0.5",
"@angular/compiler": "19.0.5",
"@angular/core": "19.0.5",
"@angular/forms": "19.0.5",
"@angular/platform-browser": "19.0.5",
"@angular/platform-browser-dynamic": "19.0.5",
"@angular/router": "19.0.5",
"@ng-icons/core": "^29.10.0",
"@ng-icons/lucide": ">=29.0.0",
"@pdfme/common": "^5.2.9",
"@pdfme/generator": "^5.2.9",
"@pdfme/schemas": "^5.2.9",
"@pdfme/ui": "^5.2.9",
"@spartan-ng/ui-accordion-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-alertdialog-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-avatar-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-checkbox-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-collapsible-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-command-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-core": "^0.0.1-alpha.357",
"@spartan-ng/ui-dialog-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-formfield-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-forms-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-hovercard-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-icon-helm": "0.0.1-alpha.357",
"@spartan-ng/ui-label-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-menu-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-popover-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-progress-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-radiogroup-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-select-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-separator-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-sheet-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-switch-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-table-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-tabs-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-toggle-brain": "^0.0.1-alpha.357",
"@spartan-ng/ui-tooltip-brain": "^0.0.1-alpha.357",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"embla-carousel-angular": "^14.0.0",
"ngx-scrollbar": "^13.0.1",
"ngx-sonner": "^2.0.0",
"ngxtension": "^4.0.0",
"rxjs": "~7.8.0",
"zone.js": "0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "19.0.6",
"@angular-devkit/core": "19.0.6",
"@angular-devkit/schematics": "19.0.6",
"@angular/cdk": "19.0.4",
"@angular/cli": "~19.0.0",
"@angular/compiler-cli": "19.0.5",
"@angular/language-service": "19.0.5",
"@eslint/js": "^9.14.0",
"@nx/angular": "20.2.2",
"@nx/cypress": "20.2.2",
"@nx/eslint": "20.2.2",
"@nx/eslint-plugin": "20.2.2",
"@nx/jest": "20.2.2",
"@nx/js": "20.2.2",
"@nx/web": "20.2.2",
"@nx/workspace": "20.2.2",
"@schematics/angular": "19.0.6",
"@spartan-ng/cli": "^0.0.1-alpha.357",
"@swc-node/register": "~1.9.1",
"@swc/core": "~1.5.7",
"@swc/helpers": "~0.5.11",
"@types/jest": "^29.5.12",
"@types/node": "18.16.9",
"@typescript-eslint/utils": "^8.13.0",
"angular-eslint": "19.0.2",
"autoprefixer": "^10.4.0",
"cypress": "^13.13.0",
"eslint": "^9.14.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-cypress": "^4.1.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-preset-angular": "14.4.2",
"jsonc-eslint-parser": "^2.4.0",
"ng-packagr": "19.0.1",
"ngx-mask": "^18.0.0",
"nx": "20.2.2",
"postcss": "^8.4.5",
"postcss-url": "~10.1.3",
"prettier": "^3.3.3",
"tailwind-merge": "^2.2.0",
"tailwindcss": "^3.4.13",
"tailwindcss-animate": "^1.0.6",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
"tslib": "^2.3.0",
"typescript": "5.6.3",
"typescript-eslint": "^8.0.0",
"zod": "^3.23.8"
}
}

Which area/package is the issue in?

accordion

Description

When opening Sonner component on click action, the panel closes with no duration.

Please provide the exception or error you saw

https://github.com/user-attachments/assets/f76c4dea-5796-40ab-b43a-e3e3af52fc39

Other information

showToast() {
    toast('Formulaire incomplet', {
      description: 'Certains champs ont mal été renseignés',
      cancel: {
        label: 'Ok',
      },
      position: 'top-right',
      duration: 4000, // value by default
    });
  }

I would be willing to submit a PR to fix this issue

• Yes
• No

[archturion64]

had the same issue after migrating to angular 19.
updating to "ngx-sonner": "^3.0.0", in my project's package json resolved it for me

[MagicKitty]

Solved for Sonner! Thanks @archturion64 :-)
Tooltips and Sheet still don't show up though. Dialogs are ok.
any ideas?

[archturion64]

Solved for Sonner! Thanks @archturion64 :-) Tooltips and Sheet still don't show up though. Dialogs are ok. any ideas?

Tooltips work fine for me and I don't use sheet atm

[goetzrobin]

For us to upgrade to Sonner 3.0.0 we need to upgrade Angular to 19.0.0 and up. Might do this before V1, but need to discuss

[MagicKitty]

Why shouldn't you upgrade?

[goetzrobin]

The only thing would be supporting more people on Angular 18, who cannot upgrade to 19 yet. But ideally we'd get that in asap

[MagicKitty]

Wouldn't it be interesting to compile delivery?

[goetzrobin]

What do you mean by that?

[MagicKitty]

If project was compiled, would version 19 be mandatory for the end-user? As long as solely angular 19 features are requested to use the lib.

[ashley-hunter]

It depends, each version of Angular is different. You can avoid using v19 specific features, that's one thing, but depends on what the compiler does to the templates behind the scenes too. It adds a minVersion field to compiled components too based on template features, and this can prevent users using lower versions too. There can also be issues with TypeScript breaking changes in d.ts files as TypeScript doesn't follow semver.

[MagicKitty]

Interesting! Thanks for the answer guys :)

Have a nice week!