Why the focus is not inside the modal

[OmranAbazid]

Hi,
I would like to know why the focus stays on the button after opening the modal in this example:
https://codesandbox.io/s/wizardly-ace-46mrwt?file=/index.js

I thought that the focus will be adjusted automatically to be inside the modal once the modal opens as mentioned here:
https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--default#focus-management

This seems happens when using createPortal. Is there a workaround for this?

[tw15egan]

You can add data-modal-primary-focus to the Button you would like to receive focus: https://codesandbox.io/s/autumn-thunder-5rr35d?file=/index.js

[OmranAbazid]

I am already aware of this, but I would expect the focus to always move to the modal without the need to add an extra property to each modal in the application.

[tw15egan]

Part of the issue is you are conditionally rendering the modal body content, you can remove that. Secondly, you should be using primaryButtonText and secondaryButtonText to render the buttons. THen, you can hook into onRequestClose and onRequestSubmit

https://codesandbox.io/s/silent-leftpad-9xnh4r?file=/index.js

[OmranAbazid]

Thank you for clarifying this. I was not aware of this limitation when using the normal buttons.
The behavior looks inconsistent in my opinion because the focus moves inside correctly if we are using separate footer buttons without the portal rendering.