How to track toast dismissal using useToast()?

[alamenai]

Is there a recommended way to track when a toast created with useToast().toast() is dismissed (either manually by the user or automatically after the duration)?

Right now, the toast() method doesn’t seem to support an onDismiss callback or reliably trigger onOpenChange

Example

const { toast, dismiss } = useToast()

toast({
  title: "Save changes?",
  description: "Do you want to save changes?",
  duration: 10000,
  // This doesn't seem to get called
  onOpenChange: (open) => {
    if (!open) {
      console.log("Toast dismissed")
    }
  },
})

Original code

 const createRoofLayer = (roofSurface: RoofSurface, allRoofSurfaces: RoofSurface[]): Feature => {
    const coordinates = [roofSurface.coords]
    if (roofSurface.superStructures) {
      coordinates.push(...roofSurface.superStructures)
    }

    const feature: Feature = {
      id: `roof-${address}-${roofSurface.id}`,
      type: "Feature",
      properties: {
        id: roofSurface.id,
        user_roofStatus: "#16a34a",
      },
      geometry: {
        type: "Polygon",
        coordinates: coordinates,
      },
    }

    // const outlineSourceId = `roof-outline-${address}-${roofSurface.id}`

    // if (!mapRef.current?.getSource(outlineSourceId)) {
    //   mapRef.current?.addSource(outlineSourceId, {
    //     type: "geojson",
    //     data: feature,
    //   })

    //   // Green fill layer on top with a slight offset
    //   mapRef.current?.addLayer({
    //     id: `${outlineSourceId}-fill`,
    //     type: "fill",
    //     source: outlineSourceId,
    //     paint: {
    //       "fill-color": "#16a34a",
    //       "fill-opacity": 0.2,
    //       "fill-outline-color": "#16a34a",
    //     },
    //   })

    //   // Add visible outline
    //   mapRef.current?.addLayer({
    //     id: outlineSourceId,
    //     type: "line",
    //     source: outlineSourceId,
    //     paint: {
    //       "line-color": "#16a34a",
    //       "line-width": 2,
    //       "line-opacity": 1,
    //     },
    //   })

    //   // Ensure roof layers are always rendered behind panel layers
    //   if (mapRef.current?.getStyle()?.layers) {
    //     // Get the first panel-related layer
    //     const firstPanelLayer = mapRef.current.getStyle()?.layers.find((layer) => layer.id.startsWith("panels"))

    //     if (firstPanelLayer) {
    //       mapRef.current.moveLayer(outlineSourceId, firstPanelLayer.id)
    //       mapRef.current.moveLayer(`${outlineSourceId}-fill`, firstPanelLayer.id)
    //     }
    //   }
    // }

    const current = mapRef.current as MapWithDraw
    current.draw.add(feature as Feature)

    // Update the draw.update event to show a toast
    current.on("draw.update", (e: { features: Feature[] }) => {
      if (e.features.length > 0) {
        const updatedFeature = e.features[0]

        // Find the original roof id from the feature id
        const featureId = updatedFeature.id as string
        const roofIdMatch = featureId.match(/roof-.*-(\d+)/)
        const roofId = roofIdMatch ? parseInt(roofIdMatch[1]) : null
        toast({
          className: "flex flex-col justify-start gap-4 items-start relative",
          title: "Änderungen speichern?",
          description: "Möchten Sie die Änderungen an diesem Dach speichern?",
          duration: 10000, // 10 seconds
          onOpenChange: (open) => {
            // This did not work ! 
            if (!open) {
              console.log("Toast was dismissed!")
              handleCancelRoofChanges(updatedFeature.id as string, roofId, allRoofSurfaces)
            }
          },
          action: (
            <div className='flex gap-2'>
              <ToastAction
                className='bg-blue-600 hover:bg-blue-700 text-white'
                altText='Speichern'
                onClick={() => {
                  handleSaveRoofChanges(updatedFeature, roofId)
                }}
              >
                Speichern
              </ToastAction>
              <ToastAction
                altText='Abbrechen'
                onClick={() => {
                  handleCancelRoofChanges(updatedFeature.id as string, roofId, allRoofSurfaces)
                }}
              >
                Abbrechen
              </ToastAction>
            </div>
          ),
        })
      }
    })

    return feature
  }

Is there a built-in way to handle this?

Thanks!