fix(bpmn): correct IdProps validation

Ensure validation is a callback (and properly reacts to dependency updates).

closes #1021

Author: marstamm

src/provider/bpmn/properties/IdProps.js

@@ -5,6 +5,8 @@ import {
 
 import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
 
+import { useCallback } from '@bpmn-io/properties-panel/preact/hooks';
+
 import {
   useService
 } from '../../../hooks';
@@ -50,15 +52,15 @@ function Id(props) {
     });
   };
 
-  const getValue = (element) => {
-    return element.businessObject.id;
-  };
+  const getValue = useCallback((element) => {
+    return getBusinessObject(element).id;
+  }, [ element ]);
 
-  const validate = (value) => {
+  const validate = useCallback((value) => {
     const businessObject = getBusinessObject(element);
 
     return isIdValid(businessObject, value, translate);
-  };
+  }, [ element, translate ]);
 
   return TextFieldEntry({
     element,

src/provider/bpmn/properties/ProcessProps.js

@@ -2,6 +2,8 @@ import { is } from 'bpmn-js/lib/util/ModelUtil';
 
 import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
 
+import { useCallback } from '@bpmn-io/properties-panel/preact/hooks';
+
 import {
   useService
 } from '../../../hooks';
@@ -104,9 +106,9 @@ function ProcessId(props) {
     );
   };
 
-  const validate = (value) => {
+  const validate = useCallback((value) => {
     return isIdValid(process, value, translate);
-  };
+  }, [ process, translate ]);
 
   return TextFieldEntry({
     element,

test/spec/provider/bpmn/IdProps.spec.js

@@ -113,6 +113,26 @@ describe('provider/bpmn - IdProps', function() {
 
     describe('validation', function() {
 
+      it('should set invalid', inject(async function(elementRegistry, selection) {
+
+        // given
+        const task = elementRegistry.get('Task_1');
+
+        await act(() => {
+          selection.select(task);
+        });
+
+        // when
+        const idInput = domQuery('input[name=id]', container);
+        changeInput(idInput, '');
+        await act(() => {});
+
+        // then
+        const error = domQuery('.bio-properties-panel-error', container);
+        expect(error).to.exist;
+      }));
+
+
       it('should NOT remove id', inject(async function(elementRegistry, selection) {
 
         // given

test/spec/provider/bpmn/ProcessProps.spec.js

@@ -209,6 +209,26 @@ describe('provider/bpmn - ProcessProps', function() {
 
     describe('validation', function() {
 
+      it('should set invalid', inject(async function(elementRegistry, selection) {
+
+        // given
+        const participant = elementRegistry.get('Participant_1');
+
+        await act(() => {
+          selection.select(participant);
+        });
+
+        // when
+        const processIdInput = domQuery('input[name=processId]', container);
+        changeInput(processIdInput, '');
+        await act(() => {});
+
+        // then
+        const error = domQuery('.bio-properties-panel-error', container);
+        expect(error).to.exist;
+      }));
+
+
       it('should NOT remove id', inject(async function(elementRegistry, selection) {
 
         // given