I’m in the process of adding a simple sidebar modal to my package that will display some data. So at this point, I don’t need anything fancy and I don’t have anything that will be returned from the modal.
Looking at the documentation, I simply add the following to my component:
<uui-modal-container>
<uui-modal-sidebar size="medium">
<h1>This is my modal!</h1>
<p>This is the content of the modal.</p>
</uui-modal-sidebar>
</uui-modal-container>
And that works great!
However, as per documentation, the modal opens automatically at first load. So, we want to prevent that. The documentation says: “All events from the modal base can be cancelled, thus preventing them from executing code, which enables you to customize the behavior.”
But HOW? PreventDefault works partially:
<uui-modal-container>
<uui-modal-sidebar
size="medium"
@open="${(event: Event) => { event.preventDefault() } }">
<h1>This is my modal!</h1>
<p>This is the content of the modal.</p>
</uui-modal-sidebar>
</uui-modal-container>
This will not open the modal, but it will still add the black overlay:
Anyone an idea?