Fix link to add nested with nested html elements as content

arielj · Mar 4, 2021 · 78d2800 · 78d2800
1 parent cf999fd
commit 78d2800
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/app/assets/javascripts/vanilla_nested.js b/app/assets/javascripts/vanilla_nested.js
@@ -4,7 +4,10 @@
   window.addVanillaNestedFields = function(event) {
     event.preventDefault();
 
-    const element = event.target;
+    let element = event.target;
+    if (!element.classList.contains('vanilla-nested-add'))
+      element = element.closest('.vanilla-nested-add')
+
     const data = element.dataset;
     const container = document.querySelector(data.containerSelector);
     const newHtml = data.html.replace(/_idx_placeholder_/g, Date.now());
@@ -126,7 +129,7 @@
 
   document.addEventListener('DOMContentLoaded', function(){
     document.querySelectorAll('.vanilla-nested-add').forEach(el => {
-      el.addEventListener('click', addVanillaNestedFields);
+      el.addEventListener('click', addVanillaNestedFields, true);
     })
 
     document.querySelectorAll('.vanilla-nested-remove').forEach(el => {

diff --git a/test/VanillaNestedTests/app/views/users/_form.html.erb b/test/VanillaNestedTests/app/views/users/_form.html.erb
@@ -2,7 +2,9 @@
   <%= form.label :name %>
   <%= form.text_field :name %>
 
-  <%= link_to_add_nested(form, :pets, '#pets') %>
+  <%= link_to_add_nested(form, :pets, '#pets') do %>
+    <span><span>Add Pet</span></span>
+  <% end %>
   <h1>Pets</h1>
   <div id='pets'>
     <%= form.fields_for :pets do |pet_f| %>