# Unintentional exiting of a tab

**URL:** <https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [11 July 2024 15:53 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428 "2024-07-11T15:53:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [11 July 2024 15:53 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/1 "2024-07-11T15:53:24Z")

</div>

How can unintentional exiting of a tab be prevented?

If data has been changed while working on a tab, the user should be asked whether they want to leave the page. Which node elements can be used to achieve this?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 July 2024 16:55 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/2 "2024-07-11T16:55:37Z")

</div>

You should bear in mind that changing tabs on Dashboard is NOT changing the HTTP location. So changing tabs probably should not loose any data (I'm not sure whether it actually does).

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 July 2024 17:01 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/3 "2024-07-11T17:01:54Z")

</div>

And indeed, it does not. I tested with 2 text inputs on different tabs, entered text and changed tabs without leaving the field.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [11 July 2024 17:02 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/4 "2024-07-11T17:02:08Z")

</div>

Good point.  
But when the user leaves the page, he might forget that he has changed data on the previous TAB that necessarily be saved! This is because they would have to return to the original TAB and complete the work there.

I'm looking for something like this:  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/284eda82fbd89c54af113536a58a59f347325ddd.png)

See here:

> <https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes>

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 July 2024 17:04 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/5 "2024-07-11T17:04:08Z")

</div>

Yes, but if you check, you will find that the text is sent immediately. so node-red already has the message and if I reload the page, the Dashboard has already cached the value so nothing is lost.

In other words, a Node-RED dashboard is not really anything like a traditional web page.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 July 2024 17:05 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/6 "2024-07-11T17:05:21Z")

</div>

> [@gNeandr](#):
>
> I'm looking for something like this:

I don't think that is possible because the update happens immediately so that would never trigger anyway.

---

<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:** [11 July 2024 17:09 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/7 "2024-07-11T17:09:17Z")

</div>

Are you talking about the node red editor? If so then the browser should warn you that there are unsaved changes when you try to close it, and take you there if you cancel the close.  
In version 4 of node red there is a blue dot on the tab header if there are unsaved changes in that tab.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [11 July 2024 17:10 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/8 "2024-07-11T17:10:37Z")

</div>

Not on the Editor.  
It's about using the TAB by the user, not the developer ...

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [11 July 2024 17:14 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/9 "2024-07-11T17:14:14Z")

</div>

Actually, it should initially be sufficient that the user cannot leave the TAB. This could be activated as soon as the data on the page is changed. And deactivated - i.e. TAB can be changed - after the data has been saved.

---

<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:** [11 July 2024 18:24 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/10 "2024-07-11T18:24:55Z")

</div>

What node type in the dashboard are you referring to? Dashboard 1 or 2?

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [11 July 2024 18:30 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/11 "2024-07-11T18:30:25Z")

</div>

> [@Colin](#):
>

Dashboard 1

---

<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:** [11 July 2024 19:21 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/12 "2024-07-11T19:21:51Z")

</div>

And the node type? Most will post their data when you change tabs I think.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [11 July 2024 20:29 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/13 "2024-07-11T20:29:39Z")

</div>

Back to the basic question:  
_How can the user be informed that changed data on the TAB page could be lost if he leaves the page intentionally or unintentionally?_  
This is already possible with the simplest programmes (Nodepad, etc.).  
So how can it work in Nodered with Dashboard 1?

---

<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:** [14 July 2024 07:38 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/14 "2024-07-14T07:38:42Z")

</div>

How can one know that a user has completed entering all necessary data?

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [14 July 2024 09:49 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/15 "2024-07-14T09:49:06Z")

</div>

Sorry, strange point of view.  
When you are working on a document on the screen, you want to save your work before you leave the application-- here with Nodered leave the TAB.  
Using the example of a simple word processor, such as Nodepad, you are asked whether the file should be saved before leaving the application.

This is exactly the point!

---

<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:** [14 July 2024 10:12 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/16 "2024-07-14T10:12:09Z")

</div>

There is no save option in the dashboard. Fields are passed to the flow as new values are entered. Try it with a Text Input node. With the default setting for the node it will send a message to the flow 300ms after you stop typing. So the data is 'saved' automatically.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 July 2024 10:59 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/17 "2024-07-14T10:59:59Z")

</div>

> [@gNeandr](#):
>
> When you are working on a document on the screen, you want to save your work before you leave the application-- here with Nodered leave the TAB.

I already made this clear at the beginning of this thread which seems to have been overlooked. Dashboard sends the data straight back to Node-RED as it is changed. It is not like a traditional web page.

---

<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:** [14 July 2024 12:27 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/18 "2024-07-14T12:27:45Z")

</div>

The one exception that I can think of is the ui\_form node, which does not submit until the submit button is clicked. I asked the OP what nodes he was using in order to determine whether the issue is with forms or not, but did not get a reply.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [14 July 2024 13:53 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/19 "2024-07-14T13:53:35Z")

</div>

Perhaps I have reduced the facts too much in the descriptions of what is to be achieved, which may have led to it not being clear where "my" problem lies.

The behaviour of Nodered is clear: actions with nodes are executed directly and the status of the changed node is "retained". So far so good.  
The core of the core here is that a table is read from a JSON file with a flow/tab. Then the editing of the table takes place.

If this modified table is not written back to the file before leaving the tab, these changes to the table are lost. Therefore the requirement to inform the user before changing the tab that data not written to the JSON file may be lost.  
Perhaps this will clarify the situation and the requirement.

An additional point: Writing directly back to the JSON file is not useful, as the user should be able to save the changed table under a different name.

---

<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:** [14 July 2024 14:23 UTC](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428/20 "2024-07-14T14:23:04Z")

</div>

Are the changes sent to node red as they are entered?  
How does the user indicate that the edit is complete?

[Next page](https://discourse.nodered.org/t/unintentional-exiting-of-a-tab/89428.md?page=2)