UI shows error 'can't access property "resolved", ne[r] is undefined' with extjs-components having no props (#3559574) · Issues · project / canvas

UI shows error 'can't access property "resolved", ne[r] is undefined' with extjs-components having no props

>>> [!note] Migrated issue   Reported by: [fago](https://www.drupal.org/user/16747) Related to !357 !347 !355 >>> <h3 id="overview">Problem</h3> When working with extjs-component based components, every component without props reproducible leads to an error being shown in the settings form, when the component is activated for editing in the UI. In this case, no API request to fetch the input-form is made and the UI tries to re-render the settings form with the form of the previously-edited-component, and errors out. Error: <img src="https://www.drupal.org/files/issues/2025-11-24/Bildschirmfoto%20vom%202025-11-24%2012-22-47.png" alt="Error"> Error with backtrace from dev-mode: <pre>Uncaught TypeError: can't access property "resolved", inputAndUiData.model[currentComponent] is undefined     InputBehaviorsComponentPropsForm InputBehaviorsComponentPropsForm.tsx:282     InputBehaviorsWrapper inputBehaviors.tsx:313     React 18     Redux 9     rtkQueryErrorHandler rtkQuery-error.ts:123     Redux 2     undoRedoActionIdMiddleware store.ts:208     Redux 10     createImmutableStateInvariantMiddleware Immutable     createActionCreatorInvariantMiddleware Redux     updateSelectionInRedux useComponentSelection.ts:154     handleComponentSelection useComponentSelection.ts:201     handleComponentClick ComponentOverlay.tsx:134     React 27     workLoop scheduler.development.js:266     flushWork scheduler.development.js:239     performWorkUntilDeadline scheduler.development.js:533     js scheduler.development.js:571     js scheduler.development.js:633     __require chunk-OCBYBPSH.js:15     js index.js:6     __require chunk-OCBYBPSH.js:15     React 2     __require chunk-OCBYBPSH.js:15     js</pre>I don't know why this error seems to be only happening with extjs components, I debugged thoroughly but could not find any difference in the extjs components compared to a working, similar js-component. Howsoever, the component metadata of the broken components is all al-right, it has empty prop-definitions just as the working js-component. <h3 id="proposed-resolution">Proposed resolution</h3> I found out that the error does NOT happen when navigating FROM some certain components without having enum props, while it happens when the previous form has that. The underlying issue seems to be the that react triggers an update to the settings form before the fetched-form-response is cleared out. Clearing that manually with some useEffect was happening <a href="https://www.drupal.org/project/canvas_extjs/issues/3559252#comment-16356349">too late</a> also. After some <a href="https://www.drupal.org/project/canvas_extjs/issues/3559252#comment-16356214">trial and error</a> I figured out a simple and reliable fix: Skip too-early re-rendering of the instance-form by checking <code>currentComponentId != selectedComponent</code>. That reliably solves the issue and settings forms are updating as they should. <h3 id="ui-changes">User interface changes</h3> - > Related issue: [Issue #3559252](https://www.drupal.org/node/3559252)

issue