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>
This commit is contained in:
JRNitre
2026-04-24 15:53:35 +08:00
committed by GitHub
parent bcaabedc8e
commit 39778de04b
2 changed files with 61 additions and 5 deletions
@@ -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) {
@@ -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">