Focus on a widget annotation

You can set the focus on a widget annotation programmatically using the DOM API. The following example adds a custom toolbar item that focuses on a form field when clicked. Remember to adjust the selector with a valid form field name:

let instance = null;


PSPDFKit.load({
  ...defaultConfiguration,
  toolbarItems: [
    ...PSPDFKit.defaultToolbarItems,
    {
      type: "custom",
      title: "Focus",
      onPress() {
        instance.contentDocument
          .querySelector(
            ".PSPDFKit-Annotation-Widget[name='form field name']"
          )
          .focus();
      }
    }
  ]
}).then((_instance) => {
  instance = _instance;
});

If the widget annotation is associated with a text form field, you can also automatically set the selection to the end of the current value of the input using the HTMLInputElement.setSelectionRange(opens in a new tab) method:

let instance = null;


PSPDFKit.load({
  ...defaultConfiguration,
  toolbarItems: [
    ...PSPDFKit.defaultToolbarItems,
    {
      type: "custom",
      title: "Focus",
      onPress() {
        const element = instance.contentDocument.querySelector(
          ".PSPDFKit-Annotation-Widget[name='form field name']"
        );
        element.focus();
        element.setSelectionRange(
          element.value.length,
          element.value.length
        );
      }
    }
  ]
}).then((_instance) => {
  instance = _instance;
});

This has been tested with Nutrient Web SDK 2019.5.4.