Cursor Jumps to Top-Left Corner While Editing Text in Custom List Item

[yashydv2003]

Introduction

<g id="v-380" port="01895af0-52b6-4758-bc76-c4375b90d698" port-group="list" class="joint-port-body">
   <rect joint-selector="portBody" id="v-390" width="130" height="26" x="0" y="-14" fill="transparent" stroke="transparent" stroke-width="2" stroke-dasharray="0"></rect>
   <text joint-selector="label" id="v-389" font-size="13" xml:space="preserve" font-family="Open Sans" font-weight="400" fill="#1d1e20" text-anchor="start" x="10" y="-2.8000000000000003" cursor="text" style="user-select: all;">
      <tspan dy="0.3em" class="v-line">List&nbsp;Item&nbsp;1</tspan>
   </text>
   <g joint-selector="portRemoveButton" id="v-386" visibility="hidden" cursor="pointer" event="element:port:remove" transform="matrix(1,0,0,1,120,0)">
      <title>Remove List Item</title>
      <rect joint-selector="portRemoveButtonBody" id="v-387" width="16" height="16" x="-8" y="-8" fill="#FFF" rx="16" ry="16"></rect>
      <path joint-selector="portRemoveButtonIcon" id="v-388" d="M -4 -4 4 4 M -4 4 4 -4" stroke="#333" stroke-width="2"></path>
   </g>
</g>

I have a custom HTML list item, and I’m trying to edit the text in this element. However, whenever I start editing the text, the cursor unexpectedly moves to the top-left corner of the paper. I believe the issue might be related to how focus or events are being handled during the editing process.

My function to edit the label text:

this.paper.on('element:pointerdblclick', (elementView, evt, x, y) => {
            if (!this.editPermission) return;
            evt.stopPropagation();
            const element = elementView.model as any;

            const handleTextEditor = (target: SVGElement | undefined, textProperty: any[]) => {
                joint.ui.TextEditor.close();
                joint.ui.TextEditor.edit(target, {
                    cellView: elementView,
                    textProperty: textProperty,
                    annotationsProperty: ['attrs', 'label', 'annotations'],
                    onKeydown: (event: KeyboardEvent) => {
                        // console.log(event, 'key down event')
                        if (textProperty[1] === 'header') {
                            if (event.key === 'Enter') {
                                event.preventDefault()
                                joint.ui.TextEditor.close();
                            }
                        }
                    },
                    onOutsidePointerdown: (evt: PointerEvent) => {
                        joint.ui.TextEditor.close();
                    }
                });
            };

            if (element && element.attributes['type'] == 'app.ListModel') {
                if (evt.target.parentNode.parentNode.classList.contains('joint-port-body')) {
                    var ports = elementView.model.get('ports');
                    var port_index = ports?.items?.findIndex(cell => cell.id == elementView.findAttribute('port', evt.target.parentNode))
                    const nextSibling = evt.target;
                    let textProperty = ['ports', 'items', port_index, 'attrs', 'label', 'text'];
                    handleTextEditor(nextSibling, textProperty);
                } else {
                    const textElement = evt.target;
                    let textProperty = ['attrs', 'label', 'text'];
                    if (textElement.tagName.toLowerCase() === 'tspan') {
                        handleTextEditor(textElement, textProperty);
                    }
                }
            }
        }

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[yashydv2003]

@kumilingus Any suggestions?

[kumilingus]

Please provide the shape definition. Not just its markup. Thanks.

A few notes:

• there is getPortIndex() method available.
• annotationsProperty: ['attrs', 'label', 'annotations'] is fixed, but should be based on textProperty

[yashydv2003]

Following is the corresponding shape defination:

export class ListModel extends joint.dia.Element {

         defaultPorts = Array.from({ length: 3 }, (_, index) => ({
            group: 'list',
            attrs: {
                portLabel: {
                    text: `List Item ${index + 1}`, 
                },
            },
        }));

        override defaults() {
            return {
                ...super.defaults,
                type: 'List',
                ports: {
                    groups: {
                        list: {
                            position: this.itemPosition,
                        },
                    },
                    items: this.defaultPorts,
                },
                markup: [{
                    tagName: 'rect',
                    selector: 'body',
                }, {
                    tagName: 'text',
                    selector: 'label',
                },
                {
                    tagName: 'path',
                    selector: 'line',
                }, {
                    tagName: 'text',
                    selector: 'item1',
                }, {
                    tagName: 'text',
                    selector: 'item2',
                }, {
                    tagName: 'text',
                    selector: 'item3',
                }, {
                    tagName: 'g',
                    selector: 'portAddButton',
                    children: [{
                        tagName: 'rect',
                        selector: 'portAddButtonBody'
                    }, {
                        tagName: 'path',
                        selector: 'portAddButtonIcon'
                    }]
                }],
            };
        }

        override resize(width: number, height: number, opt?: any) {

            const currentHeight = this.get('size')?.height || 32;
            this.prop('ports/groups/list/size/width', width);
            this.prop('size/height', currentHeight);

            return super.resize(width, currentHeight, opt);
        }

        override initialize(...args: any[]) {
            this.on('change:ports', () => this.resizeToFitPorts());
            this.resizeToFitPorts();
            this.toggleAddPortButton('list');

            if (this.getPorts().length === 0) {
                for (let i = 0; i < 3; i++) {
                    this.addDefaultPort();
                }
            }

            super.initialize.call(this, ...args);
        }

        resizeToFitPorts() {
            const { length } = this.getPorts();
            this.prop(['size', 'height'], 32 + (28 + 1) * length);
        }

        addDefaultPort() {
            if (!this.canAddPort('list')) return;
            this.addPort({
                group: 'list',
                attrs: {
                    portBody: {
                        width: 'calc(w)',
                        height: 'calc(h-2)',
                        x: '0',
                        y: 'calc(-0.5*h)',
                        fill: 'transparent',
                        stroke: 'transparent',
                        strokeWidth: 2,
                        strokeDasharray: '0',
                    },
                    portLabel: {
                        y:'-calc(0.1*h)',
                        text: this.getDefaultPortName(),
                        fontFamily: 'Open Sans',
                        fontWeight: 400,
                        fontSize: 13,
                        fill: '#1d1e20',
                        textAnchor: 'start',
                        textVerticalAnchor: 'middle',
                    }
                },
            });
        }

        getDefaultPortName() {
            const ports = this.getGroupPorts('list');
            let portName: string;
            let i = 1;
            do {
                portName = `List Item ${i++}`;
            } while (ports.find(port => port.attrs?.['portLabel']?.text === portName));
            return portName;
        }

        canAddPort(group: string): boolean {
            return Object.keys(this.getGroupPorts(group)).length < 100;
        }

        toggleAddPortButton(group: string): void {
            const buttonAttributes = this.canAddPort(group)
                ? { fill: '#0057FF', cursor: 'pointer' }
                : { fill: '#bebebe', cursor: 'not-allowed' };
            this.attr(['portAddButton'], buttonAttributes, {
                isolate: true
            });
        }

        itemPosition(portsArgs: joint.dia.Element.Port[], elBBox: joint.dia.BBox): joint.g.Point[] {
            return portsArgs.map((_port: joint.dia.Element.Port, index: number, { length }) => {
                const bottom = elBBox.height - (28) / 2;
                const y = (length - 1 - index) * (28 + 1);
                return new g.Point(0, bottom - y);
            });
        }
    }

I have taken reference from the list demo of jointjs.

[yashydv2003]

@kumilingus I'd appreciate any suggestions on what is causing this issue or how to solve this? Thanks!