From 0e248af5c64386b0761f117d25ad1c20ed40a095 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Tue, 2 Apr 2019 15:33:46 +0200
Subject: [PATCH] Unique id for radios.

---
 .../shared/due-time-selector.component.html        |  4 ++--
 .../content/shared/field-editor.component.html     |  4 ++--
 .../content/shared/field-editor.component.ts       |  5 ++++-
 .../pages/schema/field-wizard.component.html       |  2 +-
 .../pages/schema/types/boolean-ui.component.html   |  4 ++--
 .../pages/schema/types/date-time-ui.component.html |  4 ++--
 .../schema/types/geolocation-ui.component.html     |  2 +-
 .../pages/schema/types/number-ui.component.html    |  8 ++++----
 .../pages/schema/types/string-ui.component.html    | 14 +++++++-------
 .../pages/schema/types/tags-ui.component.html      |  6 +++---
 .../pages/schemas/schema-form.component.html       |  4 ++--
 11 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/Squidex/app/features/content/shared/due-time-selector.component.html b/src/Squidex/app/features/content/shared/due-time-selector.component.html
index bbcfb622f..cbc420c11 100644
--- a/src/Squidex/app/features/content/shared/due-time-selector.component.html
+++ b/src/Squidex/app/features/content/shared/due-time-selector.component.html
@@ -5,14 +5,14 @@
 
     <ng-container content>
         <div class="form-check">
-            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately">
+            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Immediately" id="immediately" name="dueTimeMode">
             <label class="form-check-label" for="immediately">
                 {{dueTimeAction}} content item(s) immediately.
             </label>
         </div>
 
         <div class="form-check">
-            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled">
+            <input class="form-check-input" type="radio" [(ngModel)]="dueTimeMode" value="Scheduled" id="scheduled" name="dueTimeMode">
             <label class="form-check-label" for="scheduled">
                 {{dueTimeAction}} content item(s) at a later point date and time.
             </label>
diff --git a/src/Squidex/app/features/content/shared/field-editor.component.html b/src/Squidex/app/features/content/shared/field-editor.component.html
index ae1cef477..33edc9747 100644
--- a/src/Squidex/app/features/content/shared/field-editor.component.html
+++ b/src/Squidex/app/features/content/shared/field-editor.component.html
@@ -30,7 +30,7 @@
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
 							<div class="form-check form-check-inline" *ngFor="let value of field.properties['allowedValues']">
-								<input class="form-check-input" type="radio" [value]="value" [formControl]="control" />
+								<input class="form-check-input" type="radio" [value]="value" [formControl]="control" [name]="uniqueId" />
 								<label class="form-check-label">
 									{{value}}
 								</label>
@@ -66,7 +66,7 @@
 						</ng-container>
 						<ng-container *ngSwitchCase="'Radio'">
 							<div class="form-check form-check-inline" *ngFor="let value of field.properties['allowedValues']">
-								<input class="form-check-input" type="radio" value="{{value}}" [formControl]="control" />
+								<input class="form-check-input" type="radio" value="{{value}}" [formControl]="control" [name]="uniqueId" />
 								<label class="form-check-label">
 									{{value}}
 								</label>
diff --git a/src/Squidex/app/features/content/shared/field-editor.component.ts b/src/Squidex/app/features/content/shared/field-editor.component.ts
index e3690276c..d06292a19 100644
--- a/src/Squidex/app/features/content/shared/field-editor.component.ts
+++ b/src/Squidex/app/features/content/shared/field-editor.component.ts
@@ -11,7 +11,8 @@ import { FormControl } from '@angular/forms';
 import {
     AppLanguageDto,
     EditContentForm,
-    FieldDto
+    FieldDto,
+    MathHelper
 } from '@app/shared';
 
 @Component({
@@ -40,4 +41,6 @@ export class FieldEditorComponent {
 
     @Input()
     public displaySuffix: string;
+
+    public uniqueId = MathHelper.guid();
 }
\ No newline at end of file
diff --git a/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html b/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html
index 107009588..ab56d064c 100644
--- a/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/field-wizard.component.html
@@ -18,7 +18,7 @@
                     <div class="row">
                         <div class="col-4 type" *ngFor="let fieldType of fieldTypes">
                             <label>
-                                <input type="radio" class="radio-input" formControlName="type" value="{{fieldType.type}}" />
+                                <input type="radio" class="radio-input" formControlName="type" value="{{fieldType.type}}" name="fieldType" />
 
                                 <div class="row no-gutters">
                                     <div class="col-auto">
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html
index 38848a754..d8ef4eee5 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/boolean-ui.component.html
@@ -26,14 +26,14 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Checkbox'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Checkbox" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Checkbox" name="editor" />
 
                 <i class="icon-control-Checkbox"></i>
 
                 <span class="radio-label">Checkbox</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Toggle'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Toggle" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Toggle" name="editor" />
 
                 <i class="icon-control-Toggle"></i>
 
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html
index 79b645e11..e17bbb936 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/date-time-ui.component.html
@@ -26,14 +26,14 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Date'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Date" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Date" name="editor" />
 
                 <i class="icon-control-Date"></i>
 
                 <span class="radio-label">Date</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'DateTime'">
-                <input type="radio" class="radio-input" formControlName="editor" value="DateTime" />
+                <input type="radio" class="radio-input" formControlName="editor" value="DateTime" name="editor" />
 
                 <i class="icon-control-DateTime"></i>
 
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/geolocation-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/geolocation-ui.component.html
index 3bc50750a..8e7dc779c 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/geolocation-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/geolocation-ui.component.html
@@ -15,7 +15,7 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Map'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Map" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Map" name="editor" />
 
                 <i class="icon-control-Map"></i>
 
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html
index 91061dd19..7491f9d3d 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/number-ui.component.html
@@ -26,28 +26,28 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Input'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Input" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Input" name="editor" />
 
                 <i class="icon-control-Input"></i>
 
                 <span class="radio-label">Input</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Dropdown'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" name="editor" />
 
                 <i class="icon-control-Dropdown"></i>
 
                 <span class="radio-label" clas>Dropdown</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Radio'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Radio" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Radio" name="editor" />
 
                 <i class="icon-control-Radio"></i>
 
                 <span class="radio-label">Radio</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Stars'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Stars" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Stars" name="editor" />
 
                 <i class="icon-control-Stars"></i>
 
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html
index 61738de6a..0a0cf9697 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html
@@ -26,49 +26,49 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Input'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Input" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Input" name="editor" />
 
                 <i class="icon-control-Input"></i>
 
                 <span class="radio-label">Input</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Slug'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Slug" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Slug" name="editor" />
 
                 <i class="icon-control-Slug"></i>
 
                 <span class="radio-label">Slug</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'TextArea'">
-                <input type="radio" class="radio-input" formControlName="editor" value="TextArea" />
+                <input type="radio" class="radio-input" formControlName="editor" value="TextArea" name="editor" />
 
                 <i class="icon-control-TextArea"></i>
 
                 <span class="radio-label">TextArea</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'RichText'">
-                <input type="radio" class="radio-input" formControlName="editor" value="RichText" />
+                <input type="radio" class="radio-input" formControlName="editor" value="RichText" name="editor" />
 
                 <i class="icon-control-RichText"></i>
 
                 <span class="radio-label">RichText</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Markdown'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Markdown" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Markdown" name="editor" />
 
                 <i class="icon-control-Markdown"></i>
 
                 <span class="radio-label">Markdown</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Dropdown'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" name="editor" />
 
                 <i class="icon-control-Dropdown"></i>
 
                 <span class="radio-label" clas>Dropdown</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Radio'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Radio" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Radio" name="editor" />
 
                 <i class="icon-control-Radio"></i>
 
diff --git a/src/Squidex/app/features/schemas/pages/schema/types/tags-ui.component.html b/src/Squidex/app/features/schemas/pages/schema/types/tags-ui.component.html
index 750a2187a..3434fdf30 100644
--- a/src/Squidex/app/features/schemas/pages/schema/types/tags-ui.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/types/tags-ui.component.html
@@ -26,21 +26,21 @@
 
         <div class="col-9">
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Tags'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Tags" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Tags" name="editor" />
 
                 <i class="icon-control-Tags"></i>
 
                 <span class="radio-label">Tags</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Dropdown'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Dropdown" name="editor" />
 
                 <i class="icon-control-Dropdown"></i>
 
                 <span class="radio-label" clas>Dropdown</span>
             </label>
             <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Checkboxes'">
-                <input type="radio" class="radio-input" formControlName="editor" value="Checkboxes" />
+                <input type="radio" class="radio-input" formControlName="editor" value="Checkboxes" name="editor" />
 
                 <i class="icon-control-Checkboxes"></i>
 
diff --git a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
index 13c866d67..41a5a348c 100644
--- a/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
+++ b/src/Squidex/app/features/schemas/pages/schemas/schema-form.component.html
@@ -35,7 +35,7 @@
                 <div class="row no-gutters">
                     <div class="col-6 type">
                         <label>
-                            <input type="radio" class="radio-input" formControlName="isSingleton" [value]="false" />
+                            <input type="radio" class="radio-input" formControlName="isSingleton" [value]="false" name="singleton" />
                         
                             <div class="row no-gutters">
                                 <div class="col-auto">
@@ -53,7 +53,7 @@
                     </div>
                     <div class="col-6 type">
                         <label>
-                            <input type="radio" class="radio-input" formControlName="isSingleton" [value]="true" />
+                            <input type="radio" class="radio-input" formControlName="isSingleton" [value]="true" name="singleton" />
                         
                             <div class="row no-gutters">
                                 <div class="col-auto">