Turbo Confirm - Rails UI Components

To use the Turbo Confirm component, you need to set a custom confirm method using the following JavaScript code

Turbo.setConfirmMethod((message) => {
  const dialog = document.getElementById('turbo-confirm')
  dialog.querySelector('p').textContent = message
  dialog.showModal()

  return new Promise((resolve) => {
    dialog.addEventListener('close', () => {
      resolve(dialog.returnValue === 'confirm')
    }, { once: true })

    dialog.addEventListener('click', (event) => {
      if (event.target.nodeName === 'DIALOG') {
        dialog.returnValue = 'cancel'
        dialog.close()
      }
    })
  })
})

<!-- And somewhere in your layout -->
<%= render Ui::TurboConfirm::Component.new %>

Example

Preview

Code