Focus the delete button in a confirm dialog

Q: How can I initially focus the delete button, instead of the cancel button, when opening the delete annotation dialog?

A: You can do so by registering an annotations.willChange event listener.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
instance.addEventListener('annotations.willChange', event => {
  const annotation = event.annotations.get(0)
  if (event.reason === PSPDFKit.AnnotationsWillChangeReason.DELETE_START) {
    console.log('Will open deletion confirmation dialog')
    // We need to wrap the logic in a setTimeOut() because modal will get actually rendered on the next tick
    setTimeout(function() {
    // The button is in the context of the PSPDFKit iframe
      const button = instance.contentDocument.getElementsByClassName(
        'PSPDFKit-Confirm-Dialog-Button-Confirm',
      )[0]
      button.focus()
    }, 0)
  }
})

This has been tested with PSPDFKit for Web 2020.6.1.