Prevent opening of simple (sidebar) modal

Questions
, ,
1

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!

image
image1115×619 47.9 KB

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:

image
image1095×524 39.1 KB

Anyone an idea?

2

Could you conditionally render the <uui-modal-sidbar> element when some state you have in your component evaluates to true? That way you could open it on a button click or other event rather than it opening on first load.

3

Yeah, I’ve seen that solution as well. I think the entire reason why the model opens by default is because it’s meant to be inserted in the DOM then needed. But because the documentation states that you can prevent it from opening without telling us why, I really wanted to know.

I took the long approach and created my own modal using the blogs from Kevin. It’s a bit overkill for now, but I forsee some features in the future in my package that will make it worth overdoing it for now.