search

pegasystems / react-sdk-components

The React SDK Components repo is used to create the @pega/react-sdk-components and @pega/react-sdk-overrides npm packages used by the Pega Constellation React SDK. These packages provide the initial set of components used by the React SDK to render DX Components with a design system other than Pega Constellation design system.
https://community.pega.com/marketplace/components/react-sdk
Apache License 2.0
2 stars 4 forks source link

Focus loss when leaving a field inside of FieldGroupTemplate #347

Closed wimbarelds closed 1 month ago

wimbarelds commented 3 months ago

Describe the bug We have form elements inside of a FieldGroupTemplate. When a form-field inside of this FieldGroupTemplate is changed and you hit the [Tab] button, the form completely loses focus.

To Reproduce Steps to reproduce the behavior: We have form elements inside of a FieldGroupTemplate. When a form-field inside of this FieldGroupTemplate is changed and you hit the [Tab] button, the form completely loses focus.

Expected behavior When I hit tab, I expect the next element in the form to receive focus.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Additional context

After digging into why this is happening I have found the following:

The createPConnectComponent function creates a new class-component every time it is executed, as a result when you have a component that uses this function (such as FieldGroupTemplate or Reference); when the component re-renders, and createPConnectComponent is executed again, React views the resulting JSX as completely new- because the rendered component is "different".

Because the JSX is seen as new, this means the HTML element which had focus is removed from the DOM and replaced with a new element (instead of updated).

If I edit node_modules/@pega/react-sdk-components/lib/bridge/react_pconnect.js, and move the class definition outside of the function; the issue goes away completely.

tumms2021389 commented 1 month ago

Hi @wimbarelds ,

Thanks for reporting this issue, it has been fixed as part of React SDK 24.1.10 version and you can check the changes in this PR: https://github.com/pegasystems/react-sdk-components/pull/363

Thanks, Siva