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.