Highlighting field in pdf file instead of text in WebViewer

WebViewer Version: 8.9.0

Do you have an issue with a specific file(s)? NO
Can you reproduce using one of our samples or online demos? YES
Are you using the WebViewer server? NO
Does the issue only happen on certain browsers? ALL BROWSER
Is your issue related to a front-end framework? NO
Is your issue related to annotations? YES

Please give a brief summary of your issue:
(Think of this as an email subject)
Trying to search a field and highlight it on selected and unhighlight it once de-selected.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

I have tried the below code to do the same:
documentViewer.addEventListener(“annotationsLoaded”, async () => {
// here you can start interacting with annotations,
// like saving the original annotations to your server

  const { annotationManager, Annotations } = instance.Core;
  const doc = instance.Core.PDFNet;
  //const field = new Annotations.Forms.Field(this.fieldnameContext);
  const fieldManager = annotationManager.getFieldManager();
  //const fieldl: any = fieldManager.getField(fieldSelected);
  const fieldl = fieldManager.getField("TextFormField");

  Annotations.WidgetAnnotation.getContainerCustomStyles = (widget) => {
    if (widget instanceof Annotations.TextWidgetAnnotation) {
      if (widget.fieldName === "TextFormField") {
        return {
          "background-color": "yellow",

  setTimeout(() => {
      .widgets[0].element.children[0].addEventListener("blur", () => {
        Annotations.WidgetAnnotation.getContainerCustomStyles = (
        ) => {
          if (widget instanceof Annotations.TextWidgetAnnotation) {
            if (widget.fieldName === "TextFormField") {
              return {
                "background-color": "",
  }, 0);

I am looking for a better way to do it.