hiding preset info/new preset form when table presets section is collapsed

public/js/components/filter/Filter.js

@@ -143,6 +143,7 @@ export const CoreFilterCmpt = {
 				page: false,
 			},
 			collapsedHeadingLocalizationTimer: null,
+			areTablePresetsShown: false,
 		};
 	},
 	computed: {
@@ -916,11 +917,14 @@ export const CoreFilterCmpt = {
 				v-if="$props.isUsingPresets && $props.presetsId?.length"
 				v-collapse-auto-close
 				@tablePresetApplied="afterTablePresetApplied($event.preset)"
+				@[\`shown.bs.collapse\`]="areTablePresetsShown = true"
+				@[\`hide.bs.collapse\`]="areTablePresetsShown = false"
 				:id="'tablePresets' + idExtra"
 				:data-bs-parent="'#filterCollapsables' + idExtra"
 				:presetsId="$props.presetsId"
 				:tabulator="tabulator"
 				:generalPresets="$props.generalPresets"
+				:isShown="areTablePresetsShown"
 				class="card-body collapse"
 			></table-presets>
 

public/js/components/filter/Filter/TablePresets.js

@@ -26,6 +26,7 @@ export default {
 		presetsId: { type: String },
 		tabulator: { type: Object },
 		generalPresets: { type: Array, default: [] },
+		isShown: { type: Boolean, default: true }
 	},
 	emits: ["applyTablePreset"],
 	data: function () {
@@ -141,6 +142,12 @@ export default {
 			},
 			deep: true,
 		},
+		isShown() {
+			if (!this.$props.isShown) {
+				this.hidePresetInfo();
+				this.hideNewPresetForm();
+			}
+		},
 	},
 	methods: {
 		async showPresetInfo(preset) {
@@ -467,7 +474,7 @@ export default {
 						</div>
 					</div>
 				</div>
-				<div :id="'presetInfoCollapsible_' + $props.presetsId" ref="presetInfoCollapsible" class="collapse">
+				<div v-collapse-auto-close :id="'presetInfoCollapsible_' + $props.presetsId" ref="presetInfoCollapsible" class="collapse">
 					<div class="d-flex flex-column">
 						<hr />
 						<div class="d-flex flex-column gap-2">
@@ -481,7 +488,7 @@ export default {
 						</div>
 					</div>
 				</div>
-				<div :id="'newPresetFormCollapsible_' + $props.presetsId" ref="newPresetFormCollapsible" class="collapse">
+				<div v-collapse-auto-close :id="'newPresetFormCollapsible_' + $props.presetsId" ref="newPresetFormCollapsible" class="collapse">
 					<div class="d-flex flex-column">
 						<hr />
 						<div class="d-flex flex-column gap-2">