Can't display Modal programmatically

[NourEldinShobier]

What package(s) are you using?

• carbon-components
• carbon-components-react

Summary

Can't trigger ModalWrapper to display the modal remotely.

Relevant information

My ModalWrapper holds a form for adding/editing courses, and I have two buttons:

• one for adding courses - default ModalWrapper button -
• another for editing
  I tried to trigger click event of the ModalWrapper button to display the modal by calling document.getElementById('formModal').click(); when user clicks the edit button but it didn't work.

[tw15egan]

Can you recreate your issue on CodeSandbox so we can assist in debugging?

[NourEldinShobier]

Here it's https://codesandbox.io/s/vigilant-dream-e3m1e?file=/src/index.js .... I want to be able to show the modal and fill the form when the selected course edit button is clicked

[asudoh]

Weighing in; <Modal> or <ComposedModal> serves the exact purpose here, they can be controlled by open prop. I believe @emyarod has had a doc updated around this topic.

[emyarod]

yes, I would recommend using Modal or ComposedModal and essentially implementing your own version of ModalWrapper (which was only meant to be an example rather than an exported component). currently I am looking to deprecate ModalWrapper and replace it with a similar storybook example. #6806 is the WIP draft to update the ModalWrapper docs

[NourEldinShobier]

Thank you so much =D