Added tests for :horizontal_form wrapper and made it pass

Author: MichalRemis

dist/simple-form.bootstrap4.esm.js

@@ -20,23 +20,24 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   wrappers: {
     "default": {
       add: function add(element, settings, message) {
-        var wrapperElement = element.parent();
+        var parentElement = element.parent();
+        var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
         var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
 
         if (!errorElement.length) {
           errorElement = $('<' + settings.error_tag + '>', {
             "class": 'invalid-feedback',
             text: message
           });
-          wrapperElement.append(errorElement);
+          parentElement.append(errorElement);
         }
 
         wrapperElement.addClass(settings.wrapper_error_class);
         element.addClass('is-invalid');
         errorElement.text(message);
       },
       remove: function remove(element, settings) {
-        var wrapperElement = element.parent();
+        var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
         var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
         wrapperElement.removeClass(settings.wrapper_error_class);
         element.removeClass('is-invalid');

dist/simple-form.bootstrap4.js

@@ -26,23 +26,24 @@
     wrappers: {
       "default": {
         add: function add(element, settings, message) {
-          var wrapperElement = element.parent();
+          var parentElement = element.parent();
+          var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
           var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
 
           if (!errorElement.length) {
             errorElement = $('<' + settings.error_tag + '>', {
               "class": 'invalid-feedback',
               text: message
             });
-            wrapperElement.append(errorElement);
+            parentElement.append(errorElement);
           }
 
           wrapperElement.addClass(settings.wrapper_error_class);
           element.addClass('is-invalid');
           errorElement.text(message);
         },
         remove: function remove(element, settings) {
-          var wrapperElement = element.parent();
+          var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
           var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
           wrapperElement.removeClass(settings.wrapper_error_class);
           element.removeClass('is-invalid');

src/main.bootstrap4.js

@@ -15,12 +15,14 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
   wrappers: {
     default: {
       add (element, settings, message) {
-        const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/\ /g, '.'));
+        const parentElement = element.parent()
+        const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
+
         let errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
 
         if (!errorElement.length) {
           errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback', text: message })
-          wrapperElement.append(errorElement)
+          parentElement.append(errorElement)
         }
 
         wrapperElement.addClass(settings.wrapper_error_class)
@@ -29,7 +31,7 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
       },
 
       remove (element, settings) {
-        const wrapperElement = settings.wrapper_tag + "." + settings.wrapper_class.replace(/\ /g, ".")
+        const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
         const errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
 
         wrapperElement.removeClass(settings.wrapper_error_class)

vendor/assets/javascripts/rails.validations.simple_form.bootstrap4.js

@@ -26,23 +26,24 @@
     wrappers: {
       "default": {
         add: function add(element, settings, message) {
-          var wrapperElement = element.parent();
+          var parentElement = element.parent();
+          var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
           var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
 
           if (!errorElement.length) {
             errorElement = $('<' + settings.error_tag + '>', {
               "class": 'invalid-feedback',
               text: message
             });
-            wrapperElement.append(errorElement);
+            parentElement.append(errorElement);
           }
 
           wrapperElement.addClass(settings.wrapper_error_class);
           element.addClass('is-invalid');
           errorElement.text(message);
         },
         remove: function remove(element, settings) {
-          var wrapperElement = element.parent();
+          var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
           var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
           wrapperElement.removeClass(settings.wrapper_error_class);
           element.removeClass('is-invalid');