Fix collisions between bool props with same name (issue #240)

CHANGELOG.md

@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Fixed
 - Replaced `hide` property of NPCs with `hidden`, which is now saved correctly as a boolean value.
+- Fixed buggy behaviour when two checkboxes that refer to properties with the same name are visible at the same time ([#240](https://github.com/CCDirectLink/crosscode-map-editor/issues/240)).
+
+### Changed
+- Clicking the label of a property now no longer selects the input for that property.
 
 ## [0.16.0] 2022-10-03
 ## [0.15.1] 2022-09-28

webapp/src/app/shared/widgets/boolean-widget/boolean-widget.component.html

@@ -1,6 +1,8 @@
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description">
-	<label [for]="key" class="property-name">{{key}}:</label>
-	<mat-checkbox [id]="key"
+	<!-- uid is necessary because mat-checkbox uses ids to bind events, if two checkboxes anywhere have the same id confusing things happen. -->
+	<!-- Also, a counter which is always increased by one is what mat-checkbox does already when no id is assigned. -->
+	<label class="property-name">{{key}}:</label>
+	<mat-checkbox 
 	              color="primary"
 	              [checked]="settings[key]"
 	              (change)="setSetting(key, $event.checked)">

webapp/src/app/shared/widgets/boolean-widget/boolean-widget.component.ts

@@ -1,13 +1,10 @@
-import {Component} from '@angular/core';
-import {AbstractWidget} from '../abstract-widget';
+import { Component } from '@angular/core';
+import { AbstractWidget } from '../abstract-widget';
 
 @Component({
 	selector: 'app-boolean-widget',
 	templateUrl: './boolean-widget.component.html',
 	styleUrls: ['./boolean-widget.component.scss', '../widget.scss']
 })
 export class BooleanWidgetComponent extends AbstractWidget {
-	constructor() {
-		super();
-	}
 }

webapp/src/app/shared/widgets/enemy-type-widget/enemy-type-widget.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description">
-	<label [for]="key" class="property-name">{{key}}:</label>
+	<label class="property-name">{{key}}:</label>
 	<input type="button" class="default-input"
 	       [value]="this.settings[this.key] ? '[ Enemy type ]' : '[ null ]'"
 	       (click)="open()">

webapp/src/app/shared/widgets/event-widget/event-widget.component.html

@@ -1,5 +1,5 @@
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description">
-	<label [for]="key" class="property-name">{{key}}:</label>
+	<label class="property-name">{{key}}:</label>
 	<input type="button" class="default-input"
 	       [value]="this.settings[this.key] ? '[ ' + this.settings[this.key].length + ' events ]' : '[ null ]'"
 	       (click)="open()">

webapp/src/app/shared/widgets/json-widget/json-widget.component.html

@@ -1,7 +1,6 @@
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description">
-	<label [for]="key" class="property-name" *ngIf="!noPropName">{{key}}:</label>
+	<label class="property-name" *ngIf="!noPropName">{{key}}:</label>
 	<textarea class="default-input"
-	          [id]="key"
 	          [ngModel]="json.stringify(settings[key], null, 2)"
 	          (input)="setCustomSetting(key, $event.target.value)">
 	</textarea>

webapp/src/app/shared/widgets/langlabel-widget/langlabel-widget.component.html

@@ -3,23 +3,21 @@
 
 	<div fxLayout="column" fxFlex="1 1 0">
 		<div fxLayout="row" class="property-row has-value">
-			<label for=".hasValue" class="property-name">Has value: </label>
+			<label class="property-name">Has value: </label>
 			<mat-checkbox
 				[ngModel]="hasValue"
 				(ngModelChange)="setSetting([key], $event? defaultValue : undefined)"
 				class="material-input"
 				color="primary"
-				id=".hasValue"
 			></mat-checkbox>
 		</div>
 		<div *ngIf="hasValue" class="properties-container" (resized)="resizeTextareas()">
 			<div *ngFor="let language of languages" fxLayout="row" class="property-row language">
-				<label for="{{key}}.{{language}}" class="property-name">{{language}}</label>
+				<label class="property-name">{{language}}</label>
 				<!-- textarea inside div with padding because autosize does not like textareas with padding -->
 				<div class="default-input padded-autosize-textarea">
 					<textarea
 						class="default-input"
-						id="{{key}}.{{language}}"
 						[ngModel]="settings[key][language]"
 						(ngModelChange)="setSetting([key, language], $event)"
 						cdkTextareaAutosize

webapp/src/app/shared/widgets/npc-states-widget/npc-states-widget.component.html

@@ -1,4 +1,4 @@
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description">
-	<label [for]="key" class="property-name">{{key}}:</label>
+	<label class="property-name">{{key}}:</label>
 	<input type="button" class="default-input" [value]="'[ ' + npcStates.length + ' Pages ]'" (click)="open()">
 </div>

webapp/src/app/shared/widgets/npc-states-widget/npc-states/npc-states.component.html

@@ -45,12 +45,12 @@
 							<div fxLayout="row" class="property-container">
 								<label fxFlexAlign="center" class="pos-label">Pos:</label>
 
-								<label for="posx" class="property-name-small">X:</label>
-								<input id="posx" type="number" class="default-input small-input"
+								<label class="property-name-small">X:</label>
+								<input type="number" class="default-input small-input"
 								       [(ngModel)]="currentState.position.x">
 
-								<label for="posy" class="property-name-small">Y:</label>
-								<input id="posy" type="number" class="default-input small-input"
+								<label class="property-name-small">Y:</label>
+								<input type="number" class="default-input small-input"
 								       [(ngModel)]="currentState.position.y">
 							</div>
 

webapp/src/app/shared/widgets/number-widget/number-widget.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description">
-	<label [for]="key" class="property-name">{{key}}:</label>
-	<input type="number"  class="default-input" [id]="key"
+	<label class="property-name">{{key}}:</label>
+	<input type="number"  class="default-input"
 			[ngModel]="settings[key]"
 		   (input)="setSetting(key, $event.target.value)">
 </div>

webapp/src/app/shared/widgets/person-expression-widget/person-expression-widget.component.html

@@ -1,6 +1,6 @@
 <app-character-widget [custom]="settings[key]" (onChange)="updateType($event)" key="person"></app-character-widget>
 
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description">
-	<label for="expression" class="property-name">expression:</label>
-	<input id="expression" class="default-input" [ngModel]="settings[key].expression" (input)="setSetting([key, 'expression'], $event.target.value)">
+	<label class="property-name">expression:</label>
+	<input class="default-input" [ngModel]="settings[key].expression" (input)="setSetting([key, 'expression'], $event.target.value)">
 </div>

webapp/src/app/shared/widgets/string-widget/string-widget.component.html

@@ -1,8 +1,7 @@
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description" [matTooltipDisabled]="disableTooltip">
-	<label [for]="key" class="property-name">{{key}}:</label>
+	<label class="property-name">{{key}}:</label>
 	<div class="mat-select-container" *ngIf="attribute?.options; else defaultInput">
 		<app-autocompleted-textbox
-			[id]="key"
 			[availableOptions]="keys"
 			[text]="settings[key]"
 			(textChange)="setSetting(key, $event)"
@@ -12,14 +11,12 @@
 	<ng-template #defaultInput>
 		<input class="default-input"
 		       *ngIf="!attribute?.large; else largeInput"
-		       [id]="key"
 		       [ngModel]="settings[key]"
 		       (input)="setSetting(key, $event.target.value)">
 	</ng-template>
 
 	<ng-template #largeInput>
 		<textarea class="default-input"
-		          [id]="key"
 		          [ngModel]="settings[key]"
 		          (input)="setSetting(key, $event.target.value)"
 		></textarea>

webapp/src/app/shared/widgets/vec2-widget/vec2-widget.component.html

@@ -1,16 +1,16 @@
 <div fxLayout="row" class="property-container" [matTooltip]="attribute?.description">
 	<label class="property-name">{{displayName || key}}:</label>
 
-	<label [for]="key + '.x'" class="property-name-small">X:</label>
-	<input [id]="key + '.x'" type="number" class="default-input small-input"
+	<label class="property-name-small">X:</label>
+	<input type="number" class="default-input small-input"
 	       [step]="scaleSettings.scalableStep"
 	       [min]="scaleSettings.baseSize.x"
 	       [disabled]="!scaleSettings.scalableX"
 		   [ngModel]="settings[key].x"
 		   (input)="setVal('x', toInt($event.target.value))">
 
-	<label [for]="key + '.y'" class="property-name-small">Y:</label>
-	<input [id]="key + '.y'" type="number" class="default-input small-input"
+	<label class="property-name-small">Y:</label>
+	<input type="number" class="default-input small-input"
 	       [step]="scaleSettings.scalableStep"
 	       [min]="scaleSettings.baseSize.y"
 	       [disabled]="!scaleSettings.scalableY"