UI.contextMenuPopup.update

WebViewer Version:

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

Please give a brief summary of your issue:
(Think of this as an email subject)

  1. Using the VUE front-end framework
  2. Use the UI. ContextMenuPopup. Update ([]) method;
  3. I have no problem running my code in 8.12.1 or 10.0.0
  4. When I upgraded to 10.3.0, I got an error when I right-clicked twice.
  5. The code is as follows: const renderSlider = () => {
    const div=document.getElementById(‘signatruePop’);
    div.style.position = ‘relative’;
    div.style.width = ‘250px’;
    div.style.display=‘block’;
    return div;

};
this.newSignatruePop = {
type: ‘customElement’,
render: renderSlider
};
UI.contextMenuPopup.update([
this.newSignatruePop,
]);
6. The error after F12 is TypeError: Cannot read properties of null (reading ‘style’).
7. I can’t find the dom with the id of signatruePop in the source code. There is one when I right-click it for the first time, but there is no DOM for the second time

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

  1. Using the VUE front-end framework
  2. Use the UI. ContextMenuPopup. Update ([]) method;
  3. I have no problem running my code in 8.12.1 or 10.0.0
  4. When I upgraded to 10.3.0, I got an error when I right-clicked twice.
  5. The code is as follows: const renderSlider = () => {
    const div=document.getElementById(‘signatruePop’);
    div.style.position = ‘relative’;
    div.style.width = ‘250px’;
    div.style.display=‘block’;
    return div;

};
this.newSignatruePop = {
type: ‘customElement’,
render: renderSlider
};
UI.contextMenuPopup.update([
this.newSignatruePop,
]);
6. The error after F12 is TypeError: Cannot read properties of null (reading ‘style’).
7. I can’t find the dom with the id of signatruePop in the source code. There is one when I right-click it for the first time, but there is no DOM for the second time

Please provide a link to a minimal sample where the issue is reproducible:

  1. Using the VUE front-end framework
  2. Use the UI. ContextMenuPopup. Update ([]) method;
  3. I have no problem running my code in 8.12.1 or 10.0.0
  4. When I upgraded to 10.3.0, I got an error when I right-clicked twice.
  5. The code is as follows: const renderSlider = () => {
    const div=document.getElementById(‘signatruePop’);
    div.style.position = ‘relative’;
    div.style.width = ‘250px’;
    div.style.display=‘block’;
    return div;

};
this.newSignatruePop = {
type: ‘customElement’,
render: renderSlider
};
UI.contextMenuPopup.update([
this.newSignatruePop,
]);
6. The error after F12 is TypeError: Cannot read properties of null (reading ‘style’).
7. I can’t find the dom with the id of signatruePop in the source code. There is one when I right-click it for the first time, but there is no DOM for the second time

Hello 1091928997,

Looking at our Custom Element guide for reference, it seems like there might be an issue with your renderSlider function. I was able to make the DOM element appear in version 10.3 using the following:

  const renderSlider = () => {
    const div = document.createElement('input');
    div.id = `signatruePop`;
    div.style.position = `relative`;
    div.style.width = `250px`;
    div.style.display= `block`;
    console.log(document.querySelector("#signatruePop"));
    return div;
  };

Best Regards,

Carlo Mendoza
Web Developer
Apryse