Custom properties panel entry looses focus on edit

Hi everyone, I have a problem that has proven itself to be rather elusive:

Custom TextAreaEntry-fields that I add to the panel loose focus as soon as I stop typing in them. I know that this is not a general bug, because it works fine in the example project. However, I cannot tell where my setup differes from the example in a way that would explain this. Unfortunately, I am not at liberty to share the entire project, so I’ll try to explain it based on the relevant code snippets:

function serviceTaskFields(module, businessObject, bpmnFactory, properties, element) {
    // add fields
    for (let f in module.fields) {
        let field = module.fields[f];

        const getValue = () => {
            return getExpression(
                businessObject,
                field.id,
                field.default
            );
        };

        const setValue = (element, value, modeling) => {
            setExpression(
                bpmnFactory,
                businessObject,
                field.id,
                value
            );
            element = element.labelTarget || element;
            return modeling.updateProperties(element, {});
        }

        if (field.type === "text") {
            // textbox
            properties.push({
                id: field.id,
                element,
                component: () => {
                    const modeling = useService('modeling');
                    const debounce = useService('debounceInput');
                    return <TextAreaEntry
                        id={field.id}
                        element={element}
                        description={field.description}
                        label={field.name}
                        getValue={getValue}
                        setValue={(value) => setValue(element, value, modeling)}
                        debounce={debounce}
                    />
                },
                isEdited: isTextAreaEntryEdited
            })
        }
    }
}

As you can see I usually handle the actual value setting in a separate function, but even if I comment that out the error persists. If I comment out return modeling.updateProperties(element, {}); as well the input field does not loose focus anymore (but I obviously also loose my changes).

If anyone has a clue as to why the TextAreaEntry would loose focus I’d be very grateful. Personally I’m at a bit of a loss, because I can’t come up with any situation in which I would want the input to loose focus.

Perhaps this is related to an issue fixed via Debounced Input Sometimes Loses Input · Issue #146 · bpmn-io/properties-panel · GitHub

We should be releasing a fixed version of bpmn-js-properties-panel this week, so I suggest to try it out and please come back if the issue persists.

I was able to reproduce the error based on the example properties panel extension: If I move the component Spell from SpellProps as an arrow function directly into the component property, the error happens. To reproduce, simply take the example and replace SpellProps.js with

import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
import { useService } from 'bpmn-js-properties-panel';

export default function(element) {

  return [
    {
      id: 'spell',
      element,
      component: (props) => {
        const { element, id } = props;

        const modeling = useService('modeling');
        const translate = useService('translate');
        const debounce = useService('debounceInput');

        const getValue = () => {
          return element.businessObject.spell || '';
        }

        const setValue = value => {
          return modeling.updateProperties(element, {
            spell: value
          });
        }

        return <TextFieldEntry
            id={ id }
            element={ element }
            description={ translate('Apply a black magic spell') }
            label={ translate('Spell') }
            getValue={ getValue }
            setValue={ setValue }
            debounce={ debounce }
        />
      },
      isEdited: isTextFieldEntryEdited
    }
  ];
}

I’ll try to refactor my code to use a separate component definition (I had some reason for doing it this way, I just don’t remember at the moment), but in the meantime: This is probably my less than stellar knowledge of Javascript talking, but: Why would this make a difference?