diff --git a/package-lock.json b/package-lock.json index d4ad3856..da3c6b04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -62,6 +62,9 @@ "sinon-chai": "^3.7.0", "sirv-cli": "^1.0.12", "webpack": "^5.74.0" + }, + "engines": { + "node": "*" } }, "node_modules/@aashutoshrathi/word-wrap": { diff --git a/src/components/Group.js b/src/components/Group.js index 4364acc9..b959c147 100644 --- a/src/components/Group.js +++ b/src/components/Group.js @@ -58,25 +58,31 @@ export default function Group(props) { // set edited state depending on all entries useEffect(() => { - const hasOneEditedEntry = entries.find(entry => { - const { - id, - isEdited - } = entry; - const entryNode = domQuery(`[data-entry-id="${id}"]`); + // TODO(@barmac): replace with CSS when `:has()` is supported in all major browsers, or rewrite as in https://github.com/camunda/camunda-modeler/issues/3815#issuecomment-1733038161 + const scheduled = requestAnimationFrame(() => { + const hasOneEditedEntry = entries.find(entry => { + const { + id, + isEdited + } = entry; - if (!isFunction(isEdited) || !entryNode) { - return false; - } + const entryNode = domQuery(`[data-entry-id="${id}"]`); - const inputNode = domQuery('.bio-properties-panel-input', entryNode); + if (!isFunction(isEdited) || !entryNode) { + return false; + } + + const inputNode = domQuery('.bio-properties-panel-input', entryNode); + + return isEdited(inputNode); + }); - return isEdited(inputNode); + setEdited(hasOneEditedEntry); }); - setEdited(hasOneEditedEntry); - }, [ entries ]); + return () => cancelAnimationFrame(scheduled); + }, [ entries, setEdited ]); // set error state depending on all entries const allErrors = useErrors(); diff --git a/test/spec/components/Group.spec.js b/test/spec/components/Group.spec.js index 40a90286..02393c5f 100644 --- a/test/spec/components/Group.spec.js +++ b/test/spec/components/Group.spec.js @@ -43,6 +43,14 @@ describe('', function() { container = TestContainer.get(this); }); + beforeEach(() => { + sinon.replace(window, 'requestAnimationFrame', cb => cb()); + }); + + afterEach(() => { + sinon.restore(); + }); + it('should render', function() {