From 39778de04bad7f6f3888b232a1d21476c7ba83ff Mon Sep 17 00:00:00 2001
From: JRNitre <nichinichisou67@outlook.com>
Date: Fri, 24 Apr 2026 15:53:35 +0800
Subject: [PATCH] fix(gui): fix tabs visually disabled but still clickable
 during ignore patterns setup (fixes #10634) (#10651)

### Purpose

Fixes issue #10634.

### Testing

Manually tested by reproducing the issue:

- Created a new folder with "Add ignore patterns" enabled
- Verified that after saving, only the "Ignore Patterns" tab remains
accessible
- Confirmed that other tabs are visually disabled and no longer
clickable

### Screenshots

No visible UI changes.

### Explanation of the Fix

**Cause**

The issue was caused by only visually disabling tabs in the UI by
setting
their `href` attribute to an empty string (`href=""`). This made the
tabs
appear disabled, but they were still clickable, leading to confusing
behavior
where users could interact with the tabs without any actual navigation.

**Fix**

- Introduced `isFolderTabDisabled` to centralize the logic for
determining
  whether a tab should be disabled
- Added `onFolderTabClick` to prevent interaction with disabled tabs
- Updated the HTML to remove tab behavior (such as `data-toggle="tab"`
and
  `href`) when a tab is disabled

### Documentation

No documentation changes required.

Signed-off-by: JRNitre <nichinichisou67@outlook.com>
Co-authored-by: Jakob Borg <jakob@kastelo.net>
---
 .../syncthing/core/syncthingController.js     | 21 +++++++++
 .../syncthing/folder/editFolderModalView.html | 45 ++++++++++++++++---
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/gui/default/syncthing/core/syncthingController.js b/gui/default/syncthing/core/syncthingController.js
index 7014a56c4..80fa68d35 100644
--- a/gui/default/syncthing/core/syncthingController.js
+++ b/gui/default/syncthing/core/syncthingController.js
@@ -2713,6 +2713,27 @@ angular.module('syncthing.core')
                 }
             }, $scope.emitHTTPError);
         };
+        
+        $scope.isFolderTabDisabled = function (tab) {
+            if (!$scope.currentFolder) {
+                return false;
+            }
+            if ($scope.currentFolder._editing === "new-ignores") {
+                return tab !== "ignores";
+            }
+            if (tab === "ignores" && $scope.currentFolder._recvEnc) {
+                return true;
+            }
+            return false;
+        };
+
+        $scope.onFolderTabClick = function ($event, tab) {
+            if ($scope.isFolderTabDisabled(tab)) {
+                $event.preventDefault();
+                $event.stopPropagation();
+                return false;
+            }
+        };
 
         function saveFolderIgnoresExisting() {
             if ($scope.ignores.disabled) {
diff --git a/gui/default/syncthing/folder/editFolderModalView.html b/gui/default/syncthing/folder/editFolderModalView.html
index fc6faa74c..95221d734 100644
--- a/gui/default/syncthing/folder/editFolderModalView.html
+++ b/gui/default/syncthing/folder/editFolderModalView.html
@@ -2,11 +2,46 @@
   <div class="modal-body">
     <form role="form" name="folderEditor">
       <ul class="nav nav-tabs" ng-init="loadFormIntoScope(folderEditor)">
-        <li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}" class="active"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-general'}}"><span class="fas fa-cog"></span> <span translate>General</span></a></li>
-        <li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-sharing'}}"><span class="fas fa-share-alt"></span> <span translate>Sharing</span></a></li>
-        <li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-versioning'}}"><span class="fa fa-files-o"></span> <span translate>File Versioning</span></a></li>
-        <li ng-class="{'disabled': currentFolder._recvEnc}"><a data-toggle="tab" href="{{currentFolder._recvEnc ? '' : '#folder-ignores'}}"><span class="fas fa-filter"></span> <span translate>Ignore Patterns</span></a></li>
-        <li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-advanced'}}"><span class="fas fa-cogs"></span> <span translate>Advanced</span></a></li>
+        <li ng-class="{disabled: isFolderTabDisabled('general')}">
+          <a
+            ng-attr-data-toggle="{{isFolderTabDisabled('general') ? undefined : 'tab'}}"
+            ng-attr-href="{{isFolderTabDisabled('general') ? undefined : '#folder-general'}}"
+            ng-click="onFolderTabClick($event, 'general')">
+            <span class="fas fa-cog"></span> <span translate>General</span>
+          </a>
+        </li>
+        <li ng-class="{disabled: isFolderTabDisabled('sharing')}">
+          <a
+            ng-attr-data-toggle="{{isFolderTabDisabled('sharing') ? undefined : 'tab'}}"
+            ng-attr-href="{{isFolderTabDisabled('sharing') ? undefined : '#folder-sharing'}}"
+            ng-click="onFolderTabClick($event, 'sharing')">
+            <span class="fas fa-share-alt"></span> <span translate>Sharing</span>
+          </a>
+        </li>
+        <li ng-class="{disabled: isFolderTabDisabled('versioning')}">
+          <a
+            ng-attr-data-toggle="{{isFolderTabDisabled('versioning') ? undefined : 'tab'}}"
+            ng-attr-href="{{isFolderTabDisabled('versioning') ? undefined : '#folder-versioning'}}"
+            ng-click="onFolderTabClick($event, 'versioning')">
+            <span class="fa fa-files-o"></span> <span translate>File Versioning</span>
+          </a>
+        </li>
+        <li ng-class="{disabled: isFolderTabDisabled('ignores')}">
+          <a
+            ng-attr-data-toggle="{{isFolderTabDisabled('ignores') ? undefined : 'tab'}}"
+            ng-attr-href="{{isFolderTabDisabled('ignores') ? undefined : '#folder-ignores'}}"
+            ng-click="onFolderTabClick($event, 'ignores')">
+            <span class="fas fa-filter"></span> <span translate>Ignore Patterns</span>
+          </a>
+        </li>
+        <li ng-class="{disabled: isFolderTabDisabled('advanced')}">
+          <a
+            ng-attr-data-toggle="{{isFolderTabDisabled('advanced') ? undefined : 'tab'}}"
+            ng-attr-href="{{isFolderTabDisabled('advanced') ? undefined : '#folder-advanced'}}"
+            ng-click="onFolderTabClick($event, 'advanced')">
+            <span class="fas fa-cogs"></span> <span translate>Advanced</span>
+          </a>
+        </li>
       </ul>
       <div class="tab-content">