Embed events in joint popup

[Anuthama-Ganesan]

Hello,
I am trying to invoke a click event on an anchor tag inside joint popup content. The following is the cell event and onProducedUnitsClick is the event handler corresponding to the onClick event of the anchor tag.

 const onPaperCellMouserOver = (_cellView, evt) => {
    if (!_cellView.model.isLink()) {
      var element = unitEquipmentMapping.find(e => (e.rowId === _cellView.model.attributes.id));
      let machineType = element.mach_Type_Desc.trim();
      let unitID = element.unitID[0];
      console.log(_cellView.model.attributes);
      (new ui.Popup({
        content: `<div>
                <a onClick="${onProducedUnitsClick(unitID)}">View Produced Units</a>
                <br />
                <b>Units produced using ${machineType} - ${unitID}</b>
                </div>`, target: _cellView.el
      })).render();
    }
  }

  const onProducedUnitsClick = (unitID) => {
    dispatch(unitsAction.getProducedUnits(unitID, 'All'));
    return (<UnitsQualityTable unitsData={unitsData} settableload={settableload} />);
  }

I see a problem here. The event handler for anchor tag which is supposed to get invoked after clicking the anchor element inside the popup, is getting invoked on hover of the cell itself, which is not an expected behavior. Is there anything that I am missing here? Or is there a workaround for this?

[kumilingus]

You can not do this: <a onClick="${onProducedUnitsClick(unitID)}">View Produced Units</a>.
This will invoke the onProducedUnitsClick(unitID) immediately. This is not React.

You can, for instance, create an anchor element programmatically and attach an event listener to it.

const a = document.createElement('<a/>');
a.addEventListener('click', () => onProducedUnitsClick(unitID), false);

[Anuthama-Ganesan]

If I use the content as described above, I see the following error - Type 'void' is not assignable to type 'string'.ts(2322) . On inspecting the type of popup element, I see this -

namespace Popup {

            export interface Options extends ContextToolbar.Options {
                target: string | JQuery | Element;
                content?: string;
            }
        }

The content type is strongly defined as a string, so I am unable to override the type here.

Is there a workaround for this?

Also, I tried to use a custom react Popup component, but I am unaware as to how to link the popup to the currently chosen cell in the paper. The joint UI.Popup seemed to be a best fit in that case.

[kumilingus]

It should be not only string but also HTMLElement or a function returning string | HTMLElement. It has to be fixed in the upcoming patch. For the time being please use ts-ignore comment.

const content = document.createElement('div');
content.append(
  document.createElement('div'),
  document.createElement('div')
);

(new ui.Popup({
  // @ts-ignore
  content
})).render();

[Anuthama-Ganesan]

That seems to do the trick.

Another question on the same thread - Is there a way to link an onMouseLeave event to the popup, as in for the popup to hide automatically when the mouse leaves?

[kumilingus]

See mouseleave event.

const popup = new ui.Popup({ /* ... */ });
popup.el.addEventListener('mouseleave', () => { /* mouse left the popup */ });

[Anuthama-Ganesan]

That works, thanks! :)