From f2a9874944c9776b2c6a9ccf4df2ae7b7ccb4875 Mon Sep 17 00:00:00 2001
From: continga <github@continga.com>
Date: Sat, 22 Sep 2018 17:15:20 +0200
Subject: [PATCH] Create possibility for nested subforms (#17552)

* This is a combination of 8 commits.
This is the 1st commit message:

> First WIP version of supporting nested subforms.

This is the commit message #2:

> Fix nested subforms not getting correct name attribute on input fields.

This is the commit message #3:

> Fix subform rows having invalid index, fix small typo.

This is the commit message #4:

> Replace the unique subform id via random bytes by just an increasing integer in the fields type rendering process.

This is the commit message #5:

> Implement feedback from PR at Joomla;
> - Use a <template> HTML element for the template of the subform rows,
>   not a url encoded string inside of a <script> element.
> - Fix code style errors reported by phpcs.
> - Make the fixing of the unique attributes (name, id, etc) of input elements
>   of nested subform rows more errorprone, using the same method as the main
>   subform row.
> - Manually add a minified version of the javascript file.

This is the commit message #6:

> Fix failing javascript tests due to changed structure of subform repeatable template container.

This is the commit message #7:

> Change subform repeatable javascript test to correctly check on
> 0-indexed rows, previously they have been 1-indexed.

This is the commit message #8:

> Fix a problem where multi-level subforms on the same level doesnt trigger their template correctly.
> Additionally added a note why the fixScripts() method is broken and how it could get better.

* Commit code styling errors and add an aria label for the outermost 'add' button.

* Fix double group-add button on repeatable subform type.
---
 .../form/field/subform/repeatable-table.php   | 91 ++++++++++++-------
 .../repeatable-table/section-byfieldsets.php  | 25 ++++-
 .../subform/repeatable-table/section.php      | 24 ++++-
 .../joomla/form/field/subform/repeatable.php  | 39 ++++++--
 .../repeatable/section-byfieldsets.php        | 24 ++++-
 .../form/field/subform/repeatable/section.php | 24 ++++-
 libraries/joomla/form/fields/subform.php      | 10 +-
 .../js/subform-repeatable-uncompressed.js     | 74 +++++++++++----
 media/system/js/subform-repeatable.js         |  3 +-
 .../subform-repeatable/fixtures/fixture.html  |  4 +-
 10 files changed, 238 insertions(+), 80 deletions(-)

diff --git a/layouts/joomla/form/field/subform/repeatable-table.php b/layouts/joomla/form/field/subform/repeatable-table.php
index 10c09330f9b2c..1bee0c6bbdd3d 100644
--- a/layouts/joomla/form/field/subform/repeatable-table.php
+++ b/layouts/joomla/form/field/subform/repeatable-table.php
@@ -67,42 +67,67 @@
 	);
 }
 ?>
-
 <div class="row-fluid">
 	<div class="subform-repeatable-wrapper subform-table-layout subform-table-sublayout-<?php echo $sublayout; ?>">
-		<div class="subform-repeatable"
-			data-bt-add="a.group-add" data-bt-remove="a.group-remove" data-bt-move="a.group-move"
-			data-repeatable-element="tr.subform-repeatable-group"
-			data-rows-container="tbody.subform-repeatable-container" data-minimum="<?php echo $min; ?>" data-maximum="<?php echo $max; ?>">
+		<div
+			class="subform-repeatable"
+			data-bt-add="a.group-add-<?php echo $unique_subform_id; ?>"
+			data-bt-remove="a.group-remove-<?php echo $unique_subform_id; ?>"
+			data-bt-move="a.group-move-<?php echo $unique_subform_id; ?>"
+			data-repeatable-element="tr.subform-repeatable-group-<?php echo $unique_subform_id; ?>"
+			data-rows-container="tbody.rows-container-<?php echo $unique_subform_id; ?>"
+			data-minimum="<?php echo $min; ?>" data-maximum="<?php echo $max; ?>"
+		>
+			<table class="adminlist table table-striped table-bordered">
+				<thead>
+					<tr>
+						<?php echo $table_head; ?>
+						<?php if (!empty($buttons)) : ?>
+							<th style="width:8%;">
+								<?php if (!empty($buttons['add'])) : ?>
+									<div class="btn-group">
+										<a
+											class="btn btn-mini button btn-success group-add-<?php echo $unique_subform_id; ?>"
+											aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>"
+										>
+											<span class="icon-plus" aria-hidden="true"></span>
+										</a>
+									</div>
+								<?php endif; ?>
+							</th>
+						<?php endif; ?>
+					</tr>
+				</thead>
+				<tbody class="rows-container-<?php echo $unique_subform_id; ?>">
+					<?php foreach ($forms as $k => $form):
+						echo $this->sublayout(
+							$sublayout,
+							array(
+								'form' => $form,
+								'basegroup' => $fieldname,
+								'group' => $fieldname . $k,
+								'buttons' => $buttons,
+								'unique_subform_id' => $unique_subform_id,
+							)
+						);
+					endforeach; ?>
+				</tbody>
+			</table>
 
-		<table class="adminlist table table-striped table-bordered">
-			<thead>
-				<tr>
-					<?php echo $table_head; ?>
-					<?php if (!empty($buttons)) : ?>
-					<th style="width:8%;">
-					<?php if (!empty($buttons['add'])) : ?>
-						<div class="btn-group">
-							<a class="group-add btn btn-mini button btn-success" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus" aria-hidden="true"></span> </a>
-						</div>
-					<?php endif; ?>
-					</th>
-					<?php endif; ?>
-				</tr>
-			</thead>
-			<tbody class="subform-repeatable-container">
-			<?php
-			foreach ($forms as $k => $form) :
-				echo $this->sublayout($sublayout, array('form' => $form, 'basegroup' => $fieldname, 'group' => $fieldname . $k, 'buttons' => $buttons));
-			endforeach;
-			?>
-			</tbody>
-		</table>
-		<?php if ($multiple) : ?>
-		<script type="text/subform-repeatable-template-section" class="subform-repeatable-template-section">
-		<?php echo $this->sublayout($sublayout, array('form' => $tmpl, 'basegroup' => $fieldname, 'group' => $fieldname . 'X', 'buttons' => $buttons)); ?>
-		</script>
-		<?php endif; ?>
+			<?php if ($multiple) : ?>
+				<template class="subform-repeatable-template-section"><?php echo trim(
+					$this->sublayout(
+						$sublayout,
+						array(
+							'form' => $tmpl,
+							'basegroup' => $fieldname,
+							'group' => $fieldname . 'X',
+							'buttons' => $buttons,
+							'unique_subform_id' => $unique_subform_id,
+						)
+					)
+				); ?></template>
+			<?php endif; ?>
 		</div>
 	</div>
 </div>
diff --git a/layouts/joomla/form/field/subform/repeatable-table/section-byfieldsets.php b/layouts/joomla/form/field/subform/repeatable-table/section-byfieldsets.php
index 717e7c88556e8..6a27082c228f3 100644
--- a/layouts/joomla/form/field/subform/repeatable-table/section-byfieldsets.php
+++ b/layouts/joomla/form/field/subform/repeatable-table/section-byfieldsets.php
@@ -18,10 +18,13 @@
  * @var array   $buttons    Array of the buttons that will be rendered
  */
 extract($displayData);
-
 ?>
 
-<tr class="subform-repeatable-group" data-base-name="<?php echo $basegroup; ?>" data-group="<?php echo $group; ?>">
+<tr
+	class="subform-repeatable-group subform-repeatable-group-<?php echo $unique_subform_id; ?>"
+	data-base-name="<?php echo $basegroup; ?>"
+	data-group="<?php echo $group; ?>"
+>
 	<?php foreach ($form->getFieldsets() as $fieldset) : ?>
 	<td class="<?php if (!empty($fieldset->class)){ echo $fieldset->class; } ?>">
 		<?php foreach ($form->getFieldset($fieldset->name) as $field) : ?>
@@ -32,9 +35,21 @@
 	<?php if (!empty($buttons)) : ?>
 	<td>
 		<div class="btn-group">
-			<?php if (!empty($buttons['add'])) : ?><a class="group-add btn btn-mini button btn-success" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus" aria-hidden="true"></span> </a><?php endif; ?>
-			<?php if (!empty($buttons['remove'])) : ?><a class="group-remove btn btn-mini button btn-danger" aria-label="<?php echo JText::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus" aria-hidden="true"></span> </a><?php endif; ?>
-			<?php if (!empty($buttons['move'])) : ?><a class="group-move btn btn-mini button btn-primary" aria-label="<?php echo JText::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-move" aria-hidden="true"></span> </a><?php endif; ?>
+			<?php if (!empty($buttons['add'])) : ?>
+				<a class="btn btn-mini button btn-success group-add-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>">
+					<span class="icon-plus" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
+			<?php if (!empty($buttons['remove'])) : ?>
+				<a class="btn btn-mini button btn-danger group-remove-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_REMOVE'); ?>">
+					<span class="icon-minus" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
+			<?php if (!empty($buttons['move'])) : ?>
+				<a class="btn btn-mini button btn-primary group-move-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_MOVE'); ?>">
+					<span class="icon-move" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
 		</div>
 	</td>
 	<?php endif; ?>
diff --git a/layouts/joomla/form/field/subform/repeatable-table/section.php b/layouts/joomla/form/field/subform/repeatable-table/section.php
index 2b0a3a0290244..f4cf9a4a36821 100644
--- a/layouts/joomla/form/field/subform/repeatable-table/section.php
+++ b/layouts/joomla/form/field/subform/repeatable-table/section.php
@@ -21,7 +21,11 @@
 
 ?>
 
-<tr class="subform-repeatable-group" data-base-name="<?php echo $basegroup; ?>" data-group="<?php echo $group; ?>">
+<tr
+	class="subform-repeatable-group subform-repeatable-group-<?php echo $unique_subform_id; ?>"
+	data-base-name="<?php echo $basegroup; ?>"
+	data-group="<?php echo $group; ?>"
+>
 	<?php foreach ($form->getGroup('') as $field) : ?>
 	<td data-column="<?php echo strip_tags($field->label); ?>">
 		<?php echo $field->renderField(array('hiddenLabel' => true)); ?>
@@ -30,9 +34,21 @@
 	<?php if (!empty($buttons)) : ?>
 	<td>
 		<div class="btn-group">
-			<?php if (!empty($buttons['add'])) : ?><a class="group-add btn btn-mini button btn-success" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus" aria-hidden="true"></span> </a><?php endif; ?>
-			<?php if (!empty($buttons['remove'])) : ?><a class="group-remove btn btn-mini button btn-danger" aria-label="<?php echo JText::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus" aria-hidden="true"></span> </a><?php endif; ?>
-			<?php if (!empty($buttons['move'])) : ?><a class="group-move btn btn-mini button btn-primary" aria-label="<?php echo JText::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-move" aria-hidden="true"></span> </a><?php endif; ?>
+			<?php if (!empty($buttons['add'])) : ?>
+				<a class="btn btn-mini button btn-success group-add-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>">
+					<span class="icon-plus" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
+			<?php if (!empty($buttons['remove'])) : ?>
+				<a class="btn btn-mini button btn-danger group-remove-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_REMOVE'); ?>">
+					<span class="icon-minus" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
+			<?php if (!empty($buttons['move'])) : ?>
+				<a class="btn btn-mini button btn-primary group-move-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_MOVE'); ?>">
+					<span class="icon-move" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
 		</div>
 	</td>
 	<?php endif; ?>
diff --git a/layouts/joomla/form/field/subform/repeatable.php b/layouts/joomla/form/field/subform/repeatable.php
index 72f5344f56b88..00af8264a2603 100644
--- a/layouts/joomla/form/field/subform/repeatable.php
+++ b/layouts/joomla/form/field/subform/repeatable.php
@@ -39,24 +39,49 @@
 <div class="row-fluid">
 	<div class="subform-repeatable-wrapper subform-layout">
 		<div class="subform-repeatable"
-			data-bt-add="a.group-add" data-bt-remove="a.group-remove" data-bt-move="a.group-move"
-			data-repeatable-element="div.subform-repeatable-group" data-minimum="<?php echo $min; ?>" data-maximum="<?php echo $max; ?>">
+			data-bt-add="a.group-add-<?php echo $unique_subform_id; ?>"
+			data-bt-remove="a.group-remove-<?php echo $unique_subform_id; ?>"
+			data-bt-move="a.group-move-<?php echo $unique_subform_id; ?>"
+			data-repeatable-element="div.subform-repeatable-group-<?php echo $unique_subform_id; ?>"
+			data-minimum="<?php echo $min; ?>" data-maximum="<?php echo $max; ?>"
+		>
+
 			<?php if (!empty($buttons['add'])) : ?>
 			<div class="btn-toolbar">
 				<div class="btn-group">
-					<a class="group-add btn btn-mini button btn-success" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus" aria-hidden="true"></span> </a>
+					<a class="btn btn-mini button btn-success group-add-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>">
+						<span class="icon-plus" aria-hidden="true"></span>
+					</a>
 				</div>
 			</div>
 			<?php endif; ?>
 		<?php
 		foreach ($forms as $k => $form) :
-			echo $this->sublayout($sublayout, array('form' => $form, 'basegroup' => $fieldname, 'group' => $fieldname . $k, 'buttons' => $buttons));
+			echo $this->sublayout(
+				$sublayout,
+				array(
+					'form' => $form,
+					'basegroup' => $fieldname,
+					'group' => $fieldname . $k,
+					'buttons' => $buttons,
+					'unique_subform_id' => $unique_subform_id,
+				)
+			);
 		endforeach;
 		?>
 		<?php if ($multiple) : ?>
-		<script type="text/subform-repeatable-template-section" class="subform-repeatable-template-section">
-		<?php echo $this->sublayout($sublayout, array('form' => $tmpl, 'basegroup' => $fieldname, 'group' => $fieldname . 'X', 'buttons' => $buttons)); ?>
-		</script>
+			<template class="subform-repeatable-template-section"><?php echo trim(
+				$this->sublayout(
+					$sublayout,
+					array(
+						'form' => $tmpl,
+						'basegroup' => $fieldname,
+						'group' => $fieldname . 'X',
+						'buttons' => $buttons,
+						'unique_subform_id' => $unique_subform_id,
+					)
+				)
+			); ?></template>
 		<?php endif; ?>
 		</div>
 	</div>
diff --git a/layouts/joomla/form/field/subform/repeatable/section-byfieldsets.php b/layouts/joomla/form/field/subform/repeatable/section-byfieldsets.php
index 01b5d93e22d49..64bbbdbedb1d9 100644
--- a/layouts/joomla/form/field/subform/repeatable/section-byfieldsets.php
+++ b/layouts/joomla/form/field/subform/repeatable/section-byfieldsets.php
@@ -20,13 +20,29 @@
 extract($displayData);
 ?>
 
-<div class="subform-repeatable-group" data-base-name="<?php echo $basegroup; ?>" data-group="<?php echo $group; ?>">
+<div
+	class="subform-repeatable-group subform-repeatable-group-<?php echo $unique_subform_id; ?>"
+	data-base-name="<?php echo $basegroup; ?>"
+	data-group="<?php echo $group; ?>"
+>
 	<?php if (!empty($buttons)) : ?>
 	<div class="btn-toolbar text-right">
 		<div class="btn-group">
-			<?php if (!empty($buttons['add'])) : ?><a class="group-add btn btn-mini button btn-success" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus" aria-hidden="true"></span> </a><?php endif; ?>
-			<?php if (!empty($buttons['remove'])) : ?><a class="group-remove btn btn-mini button btn-danger" aria-label="<?php echo JText::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus" aria-hidden="true"></span> </a><?php endif; ?>
-			<?php if (!empty($buttons['move'])) : ?><a class="group-move btn btn-mini button btn-primary" aria-label="<?php echo JText::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-move" aria-hidden="true"></span> </a><?php endif; ?>
+			<?php if (!empty($buttons['add'])) : ?>
+				<a class="btn btn-mini button btn-success group-add-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>">
+					<span class="icon-plus" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
+			<?php if (!empty($buttons['remove'])) : ?>
+				<a class="btn btn-mini button btn-danger group-remove-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_REMOVE'); ?>">
+					<span class="icon-minus" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
+			<?php if (!empty($buttons['move'])) : ?>
+				<a class="btn btn-mini button btn-primary group-move-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_MOVE'); ?>">
+					<span class="icon-move" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
 		</div>
 	</div>
 	<?php endif; ?>
diff --git a/layouts/joomla/form/field/subform/repeatable/section.php b/layouts/joomla/form/field/subform/repeatable/section.php
index 2fb6e67b1fb6b..e36742280e0da 100644
--- a/layouts/joomla/form/field/subform/repeatable/section.php
+++ b/layouts/joomla/form/field/subform/repeatable/section.php
@@ -21,13 +21,29 @@
 
 ?>
 
-<div class="subform-repeatable-group" data-base-name="<?php echo $basegroup; ?>" data-group="<?php echo $group; ?>">
+<div
+	class="subform-repeatable-group subform-repeatable-group-<?php echo $unique_subform_id; ?>"
+	data-base-name="<?php echo $basegroup; ?>"
+	data-group="<?php echo $group; ?>"
+>
 	<?php if (!empty($buttons)) : ?>
 	<div class="btn-toolbar text-right">
 		<div class="btn-group">
-			<?php if (!empty($buttons['add'])) : ?><a class="group-add btn btn-mini button btn-success" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>"><span class="icon-plus" aria-hidden="true"></span> </a><?php endif; ?>
-			<?php if (!empty($buttons['remove'])) : ?><a class="group-remove btn btn-mini button btn-danger" aria-label="<?php echo JText::_('JGLOBAL_FIELD_REMOVE'); ?>"><span class="icon-minus" aria-hidden="true"></span> </a><?php endif; ?>
-			<?php if (!empty($buttons['move'])) : ?><a class="group-move btn btn-mini button btn-primary" aria-label="<?php echo JText::_('JGLOBAL_FIELD_MOVE'); ?>"><span class="icon-move" aria-hidden="true"></span> </a><?php endif; ?>
+			<?php if (!empty($buttons['add'])) : ?>
+				<a class="btn btn-mini button btn-success group-add-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_ADD'); ?>">
+					<span class="icon-plus" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
+			<?php if (!empty($buttons['remove'])) : ?>
+				<a class="btn btn-mini button btn-danger group-remove-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_REMOVE'); ?>">
+					<span class="icon-minus" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
+			<?php if (!empty($buttons['move'])) : ?>
+				<a class="btn btn-mini button btn-primary group-move-<?php echo $unique_subform_id; ?>" aria-label="<?php echo JText::_('JGLOBAL_FIELD_MOVE'); ?>">
+					<span class="icon-move" aria-hidden="true"></span>
+				</a>
+			<?php endif; ?>
 		</div>
 	</div>
 	<?php endif; ?>
diff --git a/libraries/joomla/form/fields/subform.php b/libraries/joomla/form/fields/subform.php
index 988fb6eb9dd8b..5204ed02de29a 100644
--- a/libraries/joomla/form/fields/subform.php
+++ b/libraries/joomla/form/fields/subform.php
@@ -232,7 +232,7 @@ protected function getInput()
 		try
 		{
 			// Prepare the form template
-			$formname = 'subform' . ($this->group ? $this->group . '.' : '.') . $this->fieldname;
+			$formname = 'subform.' . str_replace(array('jform[', '[', ']'), array('', '.', ''), $control);
 			$tmplcontrol = !$this->multiple ? $control : $control . '[' . $this->fieldname . 'X]';
 			$tmpl = JForm::getInstance($formname, $this->formsource, array('control' => $tmplcontrol));
 
@@ -274,6 +274,14 @@ protected function getInput()
 		$data['fieldname'] = $this->fieldname;
 		$data['groupByFieldset'] = $this->groupByFieldset;
 
+		/**
+		 * For each rendering process of a subform element, we want to have a
+		 * separate unique subform id present to could distinguish the eventhandlers
+		 * regarding adding/moving/removing rows from nested subforms from their parents.
+		 */
+		static $unique_subform_id = 0;
+		$data['unique_subform_id'] = ('sr-' . ($unique_subform_id++));
+
 		// Prepare renderer
 		$renderer = $this->getRenderer($this->layout);
 
diff --git a/media/system/js/subform-repeatable-uncompressed.js b/media/system/js/subform-repeatable-uncompressed.js
index fb7d5dd0d8bfa..16f5f8070248f 100644
--- a/media/system/js/subform-repeatable-uncompressed.js
+++ b/media/system/js/subform-repeatable-uncompressed.js
@@ -29,7 +29,7 @@
 		this.$containerRows = this.options.rowsContainer ? this.$container.find(this.options.rowsContainer) : this.$container;
 
 		// last row number, help to avoid the name duplications
-        this.lastRowNum = this.$containerRows.find(this.options.repeatableElement).length;
+		this.lastRowNum = this.$containerRows.find(this.options.repeatableElement).length;
 
 		// To avoid scope issues,
 		var self = this;
@@ -67,9 +67,9 @@
 	// prepare a template that we will use repeating
 	$.subformRepeatable.prototype.prepareTemplate = function(){
 		// create from template
-		if(this.options.rowTemplateSelector){
-			var tmplElement = this.$container.find(this.options.rowTemplateSelector)[0] || {};
-			this.template = $.trim(tmplElement.text || tmplElement.textContent); //(text || textContent) is IE8 fix
+		if (this.options.rowTemplateSelector) {
+			// Find the template element and get its HTML content, this is our template.
+			this.template = $.trim(this.$container.find(this.options.rowTemplateSelector).last().html()) || '';
 		}
 		// create from existing rows
 		else {
@@ -142,13 +142,18 @@
 		$row.remove();
 	};
 
-	// fix names ind id`s for field that in $row
-	$.subformRepeatable.prototype.fixUniqueAttributes = function($row, count){
-		var group = $row.attr('data-group'),// current group name
-			basename = $row.attr('data-base-name'), // group base name, without count
-			count    = count || 0,
+	// fix names and id`s for fields in $row
+	$.subformRepeatable.prototype.fixUniqueAttributes = function(
+		$row, // the jQuery object to do fixes in
+		_count, // existing count of rows
+		_group, // current group name, e.g. 'optionsX'
+		_basename // group base name, without count, e.g. 'options'
+	) {
+		var group = (typeof _group === 'undefined' ? $row.attr('data-group') : _group),
+			basename = (typeof _basename === 'undefined' ? $row.attr('data-base-name') : _basename),
+			count    = (typeof _count === 'undefined' ? 0 : _count),
 			countnew = Math.max(this.lastRowNum, count),
-			groupnew = basename + countnew; // new group name
+			groupnew = basename + countnew;
 
 		this.lastRowNum = countnew + 1;
 		$row.attr('data-group', groupnew);
@@ -203,6 +208,22 @@
 			// Guess there a label for this input
 			$row.find('label[for="' + forOldAttr + '"]').attr('for', idNew).attr('id', idNew + '-lbl');
 		}
+
+		/**
+		 * Recursively replace our basename + old group with basename + new group
+		 * inside of nested subform template elements. First we try to find such
+		 * template elements, then we iterate through them and do the same replacements
+		 * that we have made here inside of them.
+		 */
+		var nestedTemplates = $row.find(this.options.rowTemplateSelector);
+		// If we found it, iterate over the found ones (might be more than one!)
+		for (var j = 0; j < nestedTemplates.length; j++) {
+			// Get the nested templates content (as DocumentFragment) and cast it
+			// to a jQuery object
+			var nestedTemplate = $($(nestedTemplates[j]).prop('content'));
+			// Fix the attributes for this nested template.
+			this.fixUniqueAttributes(nestedTemplate, count, group, basename);
+		}
 	};
 
 	// remove scripts attached to fields
@@ -247,18 +268,35 @@
 		if(window.SqueezeBox && window.SqueezeBox.assign){
 			SqueezeBox.assign($row.find('a.modal').get(), {parse: 'rel'});
 		}
+
+		// @TODO We need to do a lot more here. See e.g. administrator/templates/isis/js/template.js
+		// and all that it does with e.g. turning radios into btn groups with disabled/active/btn-danger classes.
+		// See also related issues #16695 and #16676, which could get fixed by this method being better.
+
+		// subforms in subforms
+		$row.find('div.subform-repeatable').subformRepeatable();
 	};
 
 	// defaults
 	$.subformRepeatable.defaults = {
-		btAdd: ".group-add", //  button selector for "add" action
-		btRemove: ".group-remove",//  button selector for "remove" action
-		btMove: ".group-move",//  button selector for "move" action
-		minimum: 0, // minimum repeating
-		maximum: 10, // maximum repeating
+		// button selector for "add" action, must be unique per nested subform!
+		btAdd: ".group-add",
+		// button selector for "remove" action, must be unique per nested subform!
+		btRemove: ".group-remove",
+		// button selector for "move" action, must be unique per nested subform!
+		btMove: ".group-move",
+		// minimum repeating
+		minimum: 0,
+		// maximum repeating
+		maximum: 10,
+		// selector for the repeatable element inside the main container,
+		// must be unique per nested subform!
 		repeatableElement: ".subform-repeatable-group",
-		rowTemplateSelector: 'script.subform-repeatable-template-section', // selector for the row template <script>
-		rowsContainer: null // container for rows, same as main container by default
+		// selector for the row template element with URL-encoded template inside it,
+		// must *NOT* be unique per nested subform!
+		rowTemplateSelector: 'template.subform-repeatable-template-section',
+		// container for rows, same as main container by default
+		rowsContainer: null
 	};
 
 	$.fn.subformRepeatable = function(options){
@@ -287,6 +325,6 @@
 	// wait when all will be loaded, important for scripts fix
 	$(window).on('load', function(){
 		$('div.subform-repeatable').subformRepeatable();
-	})
+	});
 
 })(jQuery);
diff --git a/media/system/js/subform-repeatable.js b/media/system/js/subform-repeatable.js
index 0c7159a20c657..65965ede4666a 100644
--- a/media/system/js/subform-repeatable.js
+++ b/media/system/js/subform-repeatable.js
@@ -1,2 +1 @@
-!(function(w){"use strict";w.subformRepeatable=function(e,t){if(this.$container=w(e),this.$container.data("subformRepeatable"))return a;this.$container.data("subformRepeatable",a),this.options=w.extend({},w.subformRepeatable.defaults,t),this.template="",this.prepareTemplate(),this.$containerRows=this.options.rowsContainer?this.$container.find(this.options.rowsContainer):this.$container,this.lastRowNum=this.$containerRows.find(this.options.repeatableElement).length;var a=this;this.$container.on("click",this.options.btAdd,(function(e){e.preventDefault();var t=w(this).parents(a.options.repeatableElement);t.length||(t=null),a.addRow(t)})),this.$container.on("click",this.options.btRemove,(function(e){e.preventDefault();var t=w(this).parents(a.options.repeatableElement);a.removeRow(t)})),this.options.btMove&&this.$containerRows.sortable({items:this.options.repeatableElement,handle:this.options.btMove,tolerance:"pointer"}),this.$container.trigger("subform-ready")},w.subformRepeatable.prototype.prepareTemplate=function(){if(this.options.rowTemplateSelector){var e=this.$container.find(this.options.rowTemplateSelector)[0]||{};this.template=w.trim(e.text||e.textContent)}else{var t=this.$container.find(this.options.repeatableElement).get(0),a=w(t).clone();try{this.clearScripts(a)}catch(e){window.console&&console.log(e)}this.template=a.prop("outerHTML")}},w.subformRepeatable.prototype.addRow=function(e){var t=this.$containerRows.find(this.options.repeatableElement).length;if(t>=this.options.maximum)return null;var a=w.parseHTML(this.template);e?w(e).after(a):this.$containerRows.append(a);var o=w(a);o.attr("data-new","true"),this.fixUniqueAttributes(o,t);try{this.fixScripts(o)}catch(e){window.console&&console.log(e)}return this.$container.trigger("subform-row-add",o),o},w.subformRepeatable.prototype.removeRow=function(e){this.$containerRows.find(this.options.repeatableElement).length<=this.options.minimum||(this.$container.trigger("subform-row-remove",e),e.remove())},w.subformRepeatable.prototype.fixUniqueAttributes=function(e,t){var a=e.attr("data-group"),o=e.attr("data-base-name"),r=(t=t||0,Math.max(this.lastRowNum,t)),i=o+r;this.lastRowNum=r+1,e.attr("data-group",i);for(var n=e.find("[name]"),s={},l=0,p=n.length;l<p;l++){var f=w(n[l]),c=f.attr("name"),h=c.replace(/(\[\]$)/g,"").replace(/(\]\[)/g,"__").replace(/\[/g,"_").replace(/\]/g,""),d=c.replace("["+a+"][","["+i+"]["),u=h.replace(a,i),m=0,b=h;"checkbox"===f.prop("type")&&c.match(/\[\]$/)?((m=s[h]?s[h].length:0)||(f.closest("fieldset.checkboxes").attr("id",u),e.find('label[for="'+h+'"]').attr("for",u).attr("id",u+"-lbl")),b+=m,u+=m):"radio"===f.prop("type")&&((m=s[h]?s[h].length:0)||(f.closest("fieldset.radio").attr("id",u),e.find('label[for="'+h+'"]').attr("for",u).attr("id",u+"-lbl")),b+=m,u+=m),s[h]?s[h].push(!0):s[h]=[!0],f.attr("name",d),f.attr("id",u),e.find('label[for="'+b+'"]').attr("for",u).attr("id",u+"-lbl")}},w.subformRepeatable.prototype.clearScripts=function(e){w.fn.chosen&&e.find("select.chzn-done").each((function(){var e=w(this);e.next(".chzn-container").remove(),e.show().addClass("fix-chosen")}))},w.subformRepeatable.prototype.fixScripts=function(e){e.find('a[onclick*="jInsertFieldValue"]').each((function(){var e=w(this),t=e.siblings('input[type="text"]').attr("id"),a=e.prev(),o=a.attr("href");e.attr("onclick","jInsertFieldValue('', '"+t+"');return false;"),a.attr("href",o.replace(/&fieldid=(.+)&/,"&fieldid="+t+"&"))})),w.fn.fieldMedia&&e.find(".field-media-wrapper").fieldMedia(),w.fn.fieldUser&&e.find(".field-user-wrapper").fieldUser(),window.SqueezeBox&&window.SqueezeBox.assign&&SqueezeBox.assign(e.find("a.modal").get(),{parse:"rel"})},w.subformRepeatable.defaults={btAdd:".group-add",btRemove:".group-remove",btMove:".group-move",minimum:0,maximum:10,repeatableElement:".subform-repeatable-group",rowTemplateSelector:"script.subform-repeatable-template-section",rowsContainer:null},w.fn.subformRepeatable=function(e){return this.each((function(){var e=e||{},t=w(this).data();if(!t.subformRepeatable){for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);var o=new w.subformRepeatable(this,e);w(this).data("subformRepeatable",o)}}))},w(window).on("load",(function(){w("div.subform-repeatable").subformRepeatable()}))})(jQuery);
-
+!function(R){"use strict";R.subformRepeatable=function(e,t){if(this.$container=R(e),this.$container.data("subformRepeatable"))return a;this.$container.data("subformRepeatable",a),this.options=R.extend({},R.subformRepeatable.defaults,t),this.template="",this.prepareTemplate(),this.$containerRows=this.options.rowsContainer?this.$container.find(this.options.rowsContainer):this.$container,this.lastRowNum=this.$containerRows.find(this.options.repeatableElement).length;var a=this;this.$container.on("click",this.options.btAdd,function(e){e.preventDefault();var t=R(this).parents(a.options.repeatableElement);t.length||(t=null),a.addRow(t)}),this.$container.on("click",this.options.btRemove,function(e){e.preventDefault();var t=R(this).parents(a.options.repeatableElement);a.removeRow(t)}),this.options.btMove&&this.$containerRows.sortable({items:this.options.repeatableElement,handle:this.options.btMove,tolerance:"pointer"}),this.$container.trigger("subform-ready")},R.subformRepeatable.prototype.prepareTemplate=function(){if(this.options.rowTemplateSelector)this.template=R.trim(this.$container.find(this.options.rowTemplateSelector).last().html())||"";else{var e=this.$container.find(this.options.repeatableElement).get(0),t=R(e).clone();try{this.clearScripts(t)}catch(e){window.console&&console.log(e)}this.template=t.prop("outerHTML")}},R.subformRepeatable.prototype.addRow=function(e){var t=this.$containerRows.find(this.options.repeatableElement).length;if(t>=this.options.maximum)return null;var a=R.parseHTML(this.template);e?R(e).after(a):this.$containerRows.append(a);var o=R(a);o.attr("data-new","true"),this.fixUniqueAttributes(o,t);try{this.fixScripts(o)}catch(e){window.console&&console.log(e)}return this.$container.trigger("subform-row-add",o),o},R.subformRepeatable.prototype.removeRow=function(e){this.$containerRows.find(this.options.repeatableElement).length<=this.options.minimum||(this.$container.trigger("subform-row-remove",e),e.remove())},R.subformRepeatable.prototype.fixUniqueAttributes=function(e,t,a,o){a=void 0===a?e.attr("data-group"):a,o=void 0===o?e.attr("data-base-name"):o,t=void 0===t?0:t;var i=Math.max(this.lastRowNum,t),r=o+i;this.lastRowNum=i+1,e.attr("data-group",r);for(var n=e.find("[name]"),s={},l=0,p=n.length;l<p;l++){var f=R(n[l]),c=f.attr("name"),d=c.replace(/(\[\]$)/g,"").replace(/(\]\[)/g,"__").replace(/\[/g,"_").replace(/\]/g,""),h=c.replace("["+a+"][","["+r+"]["),u=d.replace(a,r),m=0,b=d;"checkbox"===f.prop("type")&&c.match(/\[\]$/)?((m=s[d]?s[d].length:0)||(f.closest("fieldset.checkboxes").attr("id",u),e.find('label[for="'+d+'"]').attr("for",u).attr("id",u+"-lbl")),b+=m,u+=m):"radio"===f.prop("type")&&((m=s[d]?s[d].length:0)||(f.closest("fieldset.radio").attr("id",u),e.find('label[for="'+d+'"]').attr("for",u).attr("id",u+"-lbl")),b+=m,u+=m),s[d]?s[d].push(!0):s[d]=[!0],f.attr("name",h),f.attr("id",u),e.find('label[for="'+b+'"]').attr("for",u).attr("id",u+"-lbl")}var w=e.find(this.options.rowTemplateSelector);for(l=0;l<w.length;l++){var v=R(R(w[l]).prop("content"));this.fixUniqueAttributes(v,t,a,o)}},R.subformRepeatable.prototype.clearScripts=function(e){R.fn.chosen&&e.find("select.chzn-done").each(function(){var e=R(this);e.next(".chzn-container").remove(),e.show().addClass("fix-chosen")})},R.subformRepeatable.prototype.fixScripts=function(e){e.find('a[onclick*="jInsertFieldValue"]').each(function(){var e=R(this),t=e.siblings('input[type="text"]').attr("id"),a=e.prev(),o=a.attr("href");e.attr("onclick","jInsertFieldValue('', '"+t+"');return false;"),a.attr("href",o.replace(/&fieldid=(.+)&/,"&fieldid="+t+"&"))}),R.fn.fieldMedia&&e.find(".field-media-wrapper").fieldMedia(),R.fn.fieldUser&&e.find(".field-user-wrapper").fieldUser(),window.SqueezeBox&&window.SqueezeBox.assign&&SqueezeBox.assign(e.find("a.modal").get(),{parse:"rel"}),e.find("div.subform-repeatable").subformRepeatable()},R.subformRepeatable.defaults={btAdd:".group-add",btRemove:".group-remove",btMove:".group-move",minimum:0,maximum:10,repeatableElement:".subform-repeatable-group",rowTemplateSelector:"template.subform-repeatable-template-section",rowsContainer:null},R.fn.subformRepeatable=function(e){return this.each(function(){var e=e||{},t=R(this).data();if(!t.subformRepeatable){for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);var o=new R.subformRepeatable(this,e);R(this).data("subformRepeatable",o)}})},R(window).on("load",function(){R("div.subform-repeatable").subformRepeatable()})}(jQuery);
diff --git a/tests/javascript/subform-repeatable/fixtures/fixture.html b/tests/javascript/subform-repeatable/fixtures/fixture.html
index b2fc30b7a02b2..b72eaa5adfaae 100644
--- a/tests/javascript/subform-repeatable/fixtures/fixture.html
+++ b/tests/javascript/subform-repeatable/fixtures/fixture.html
@@ -25,7 +25,7 @@
 				</tr>
 			</tbody>
 		</table>
-		<script type="text/subform-repeatable-template-section" class="subform-repeatable-template-section">
+		<template class="subform-repeatable-template-section">
 			<tr class="subform-repeatable-group" data-base-name="group" data-group="groupX">
 				<td>Data 3</td>
 				<td>Data 4</td>
@@ -44,6 +44,6 @@
 					</div>
 				</td>
 			</tr>
-		</script>
+		</template>
 	</div>
 </div>