# \[IGN-2207\] Is there a way to stop/intercept a Tab Container tab change?

**URL:** <https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 2, 2021, 4:11pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214 "2021-04-02T16:11:32Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\
**Post date:** [April 2, 2021, 4:11pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/1 "2021-04-02T16:11:32Z")

</div>

I have embedded views in different tabs of a tab container that are different forms for a user to fill out. What I’m looking for is a way to stop a change to a different tab when I detect that they have filled information that hasn’t been saved yet to ask if they are okay with losing their currently entered information before navigating to the next tab, else stay on the current tab they are working in so they can save their changes/continue editing. The current issue is that since it is an embedded view (with nested embedded views), every time a tab change happens, it reloads the view(s) and everything that was entered before switching tabs would be lost, and there doesn’t seem to be a way to intercept the tab change before it happens. My initial thought is to just make my own ‘tab container’ with a multistate button or the horizontal menu component, but that doesn’t look as clean.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [April 2, 2021, 4:32pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/2 "2021-04-02T16:32:57Z")

</div>

Consider bidirectionally binding your various entry fields to session custom properties.

---

<div class="post-metadata">

**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\
**Post date:** [April 3, 2021, 12:33pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/3 "2021-04-03T12:33:44Z")

</div>

I don’t think that’ll be very reasonable considering we already have 200+ form values for them to fill out throughout the current application and it is still growing as of now too!

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [April 3, 2021, 1:23pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/4 "2021-04-03T13:23:26Z")

</div>

There isn’t a way to prevent tab changing as of today, but I have two pieces of good news:

1. Nightly 8.1.5 builds should have a code change which keeps Views running even while in tabs which are not active. You should see this change the behavior you’re experiencing such that your fields will retain their values as you switch tabs.
2. I’ve also opened a feature request to allow for “disabling” tabs via a property of each tab. No ETA on when this feature could be implemented.
3. If/when you take the content in 8.1.5, you could use that new behavior along with logic within a Change Script on the `currentTabIndex` property of the Tab Container to determine when a tab can be changed. Something like this:

```auto
# Use a message handler for each tab's internal view to declare when a form is complete.
complete = self.custom.complete  
if not complete:
    self.props.currentTabIndex = previousValue.value

```

---

<div class="post-metadata">

**Author:** ![thomasj](https://avatars.discourse-cdn.com/v4/letter/t/6f9a4e/32.png) [@thomasj](https://forum.inductiveautomation.com/u/thomasj)\
**Post date:** [April 3, 2021, 2:07pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/5 "2021-04-03T14:07:53Z")

</div>

Thanks for the replies! I will move forward with using MultiStateButtons and EmbeddedViews and handle everything with scripts and messages as we are not in a place to update Ignition at this time.

---

<div class="post-metadata">

**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\
**Post date:** [May 11, 2022, 3:06am UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/6 "2022-05-11T03:06:54Z")

</div>

> [@cmallonee](#):
>
> I’ve also opened a feature request to allow for “disabling” tabs via a property of each tab. No ETA on when this feature could be implemented.

Has there been any movement on this feature request? This would be very handy to have.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 11, 2022, 6:32am UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/7 "2022-05-11T06:32:22Z")

</div>

I’m in 8.1.5 still and ~~can~~ can’t do this already

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 11, 2022, 6:34am UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/8 "2022-05-11T06:34:45Z")

</div>

Really ? I’m on 8.1.10 and can’t find how to do this.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 11, 2022, 6:46am UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/9 "2022-05-11T06:46:36Z")

</div>

Oh wait… I was thinking of the horizontal menu bar. My bad!  
Could you use some CSS magic using `pointer-events: none`? (I can’t remember if you can set styling on individual tabs)

> **[pointer-events - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)**
>
> The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

Otherwise you could just use a view for your tabs (that’s what I’m doing)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 11, 2022, 6:50am UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/10 "2022-05-11T06:50:28Z")

</div>

Maybe. Gonna be hard to dynamically make the selector point at the right tab though.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 11, 2022, 6:52am UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/11 "2022-05-11T06:52:56Z")

</div>

Yeah, I thought there might have been a `style` prop for each tab, but doesn’t look like it 😕 that makes it harder…

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 11, 2022, 6:55am UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/12 "2022-05-11T06:55:55Z")

</div>

Without looking at it, so don’t take me too seriously, but I guess something like `nthchild` could allow targeting a specific tab. If more than one tab can be subject to this treatment, maybe a series of different classes with different values for `nthchild` can be made, then added dynamically.

There’s a point where it just becomes easier to make the component yourself ;p

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 11, 2022, 7:00am UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/13 "2022-05-11T07:00:13Z")

</div>

> [@pascal.fragnoud](#):
>
> There’s a point where it just becomes easier to make the component yourself ;p

Haha, it also gives you complete control over all visuals and functionality

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [May 11, 2022, 2:29pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/14 "2022-05-11T14:29:18Z")

</div>

The feature has not yet been begun.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 11, 2022, 2:56pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/15 "2022-05-11T14:56:18Z")

</div>

In the meantime…

`} .psc-target_first_tab .tab-menu-item[data-index="0"] {pointer-events: None } {`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/b/fb386ea8888257f500ee8881e525ff8280258d95.png)

Replace the number in `data-index="0"` to target the tab you want, remember it’s 0-based.  
If you need to make it dynamic… The best I can think of is making multiple copies of this class, for different tab indices, and assign the class dynamically.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [May 11, 2022, 3:51pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/16 "2022-05-11T15:51:24Z")

</div>

> [@pascal.fragnoud](#):
>
> The best I can think of is making multiple copies of this class, for different tab indices, and assign the class dynamically.

You could put a binding on the backgroundPosition style attribute, and use the currentTabIndex to assign the index number.

Something like:

```auto
concat('} .psc-target_tab .tab-menu-item[data-index="',{TabContainer.props.currentTabIndex},'"] {pointer-events: None } {')

```

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 11, 2022, 8:31pm UTC](https://forum.inductiveautomation.com/t/ign-2207-is-there-a-way-to-stop-intercept-a-tab-container-tab-change/45214/17 "2022-05-11T20:31:34Z")

</div>

But you don’t want to put that on the current tab though. It’s supposed to be a way to block access to some other tab while a condition has not been met.
