# Ui-group - type dialog. how to 'prevent' closing the window

**URL:** <https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [10 March 2025 04:19 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896 "2025-03-10T04:19:59Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 March 2025 04:19 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/1 "2025-03-10T04:19:59Z")

</div>

I am using dialog type ui-group to show a 'popup' window while some calculations are going on in the background, and i DONT want the user the 'close' the dialog until it is time. but the user has the ability to CLOSE the window by clicking on x. how do i prevent that ? in dashboard-1 i was using 'ui-spinner' ant it was working fine for me.

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [10 March 2025 05:23 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/2 "2025-03-10T05:23:34Z")

</div>

Have you tried using the Notification node in DB2?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 March 2025 05:35 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/3 "2025-03-10T05:35:25Z")

</div>

Add a ui-template set for CSS & use CSS to hide the X button.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 March 2025 06:03 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/4 "2025-03-10T06:03:56Z")

</div>

> [@Bobo](#):
>
> Notification node in DB2?

that does not remove the 'focus' from the underlying dashboard, user can 'click' and interact with the background.

I want exactly like a `ui-spinner` for db-1.

> [@\[Announce\] node-red-contrib-ui-spinner](https://discourse.nodered.org/t/announce-node-red-contrib-ui-spinner/78747):
>
> Hello, I would like to announce a new dashboard widget node [node-red-contrib-ui-spinner](https://github.com/HiroyasuNishiyama/node-red-contrib-ui-spinner). This node can be used to display an animated marker while performing time-consuming processing. It is implemented using [SpinKit](https://github.com/tobiasahlin/SpinKit) and supports various spinner types. [demo1] [demo2]

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 March 2025 06:21 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/5 "2025-03-10T06:21:57Z")

</div>

> [@Steve-Mcl](#):
>
> use CSS to hide the X button

```auto
.v-btn--icon .v-icon {
        display: none;
    }

```

this did hide the x button, but the user can still click 'outside' the popup window and activate the background.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 March 2025 06:42 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/6 "2025-03-10T06:42:59Z")

</div>

Then target the button not the inner icon. Use your browser dev tools to find the correct selector.

Ps, strongly recommend you add a class to the group to limit scope (what you have will affect everything it matches)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 March 2025 10:16 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/7 "2025-03-10T10:16:04Z")

</div>

> [@Steve-Mcl](#):
>
> strongly recommend you add a class

I am aware, I was doing a qucik dirty check.

> [@Steve-Mcl](#):
>
> Then target the button not the inner icon

but, still unless the dialog screen is as big as background screen, i cannot avoid user clicking outside the dialog window, which de-activates the dialog. May be i am not able to convey the message. a short video may help.

![popup](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/cab78abe6e6aa8e3f05e8782624e546c9592ce21.gif)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 March 2025 10:33 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/8 "2025-03-10T10:33:31Z")

</div>

> [@smanjunath211](#):
>
> i cannot avoid user clicking outside the dialog window, which de-activates the dialog

You could target the "shade" and set `pointer-events: none;`

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 March 2025 10:50 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/9 "2025-03-10T10:50:29Z")

</div>

I think it would be useful if the the dialog type group had a Modal option to prevent click away from happening. Also, arguably, the dialog should not have the X to allow it to be closed. Perhaps a Feature Request should be raised for this.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 March 2025 10:53 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/10 "2025-03-10T10:53:53Z")

</div>

I dont disagree. If @smanjunath211 can raise an FR issue detailing what they want / need, that would be helpful.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 March 2025 11:10 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/11 "2025-03-10T11:10:25Z")

</div>

> [@Ui-Group - dialog type, act like a wait window stopping user interactions for a while](https://discourse.nodered.org/t/ui-group-dialog-type-act-like-a-wait-window-stopping-user-interactions-for-a-while/95904):
>
> It would be nice if the ui-group dialog type had a feature so that, nothing can be clicked/selected outside the dialog window to act like a 'wait window' or like a 'ui-spinner' for db-1. this is required when a time taking process is initiated on a dashboard, and the user input has to be blocked for sometime to avoid interruptions, like querying a database.

I am not sure i have worded the FR correctly. but this is the gist.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 March 2025 11:23 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/12 "2025-03-10T11:23:20Z")

</div>

No, this should be raised on the Dashboard 2 repository (otherwise it will slip through the cracks - we do not monitor FRs raised here, only on [the repository tracker](https://github.com/FlowFuse/node-red-dashboard/issues) itself)

also, include a link back to this thread.

also, list your expectations and difficulties faced DIYing this.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 March 2025 11:58 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/13 "2025-03-10T11:58:34Z")

</div>

> <https://github.com/FlowFuse/node-red-dashboard/issues/1627>
>
> \### Description
> 
> Need a Feature when dialog group is in foreground, the user inp…ut (mouse clicks/keyboard inputs) should be blocked so that the activities in background go uninterrupted.  
> Use case: I have a dashboard where a query is submitted in the main window (mysql query ) the database query takes sometime and during that period, as the query results take significant amount of time, the user is tempted to click away. currently i try to achieve by activating the dialog group saying 'wait', but the user can click somewhere else or close the dialog box, however the activity is still going on in background and user again starts the query assuming the last query did not go through.
> in dashboard-1 i was easily getting this done through 'ui-spinner'. I need exactly same features as ui-spinner.
> 
> \### Have you provided an initial effort estimate for this issue?
> 
> I have provided an initial effort estimate

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [30 March 2025 02:46 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/14 "2025-03-30T02:46:40Z")

</div>

Am really struggling in the UI when user is losing patience and starts clicking further loading the server. need a quickfix to stop user interaction so that till the flow is 'ready' not allow any user interaction.

this was perfect for me. (for db1)

> [@\[Announce\] node-red-contrib-ui-spinner](https://discourse.nodered.org/t/announce-node-red-contrib-ui-spinner/78747):
>
> Hello, I would like to announce a new dashboard widget node [node-red-contrib-ui-spinner](https://github.com/HiroyasuNishiyama/node-red-contrib-ui-spinner). This node can be used to display an animated marker while performing time-consuming processing. It is implemented using [SpinKit](https://github.com/tobiasahlin/SpinKit) and supports various spinner types. [demo1] [demo2]

I am trying to use a flow context and switch node to restrict user inputs, but there are too many places where i have to monitor this input.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 April 2025 02:47 UTC](https://discourse.nodered.org/t/ui-group-type-dialog-how-to-prevent-closing-the-window/95896/15 "2025-04-29T02:47:31Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.