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(

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

        if (field.type === "text") {
            // textbox
                component: () => {
                    const modeling = useService('modeling');
                    const debounce = useService('debounceInput');
                    return <TextAreaEntry
                        setValue={(value) => setValue(element, value, modeling)}
                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',
      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?