From 1c003deeb0b0ba44ae2cd5b4b7b871ad9b4d62dc Mon Sep 17 00:00:00 2001
From: "Mark H. Wilkinson" <mhw@dangerous-techniques.com>
Date: Tue, 6 Apr 2021 14:39:16 +0100
Subject: [PATCH] input_groups: add .has-validation, move feedback

New .has-validation class was added so validation feedback can move
inside input-group. This works ok for simple_form, but the plain
HTML version with both .valid-feedback and .invalid-feedback divs
loses the rounded end on the input group.

See https://github.com/twbs/bootstrap/issues/25110
---
 .../examples/input_groups/_bootstrap.html.erb | 24 +++++++++----------
 config/initializers/simple_form_bootstrap.rb  |  4 ++--
 .../simple_form-bootstrap/input_group_test.rb |  6 ++---
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/views/examples/input_groups/_bootstrap.html.erb b/app/views/examples/input_groups/_bootstrap.html.erb
index e819ef56..07eb1137 100644
--- a/app/views/examples/input_groups/_bootstrap.html.erb
+++ b/app/views/examples/input_groups/_bootstrap.html.erb
@@ -3,46 +3,46 @@
 
   <div class="mb-3">
     <label for="exampleInputName" class="form-label">Name</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <span class="input-group-text" id="basic-addon1">@</span>
       <input type="text" class="form-control" id="exampleInputName" placeholder="Your name" required>
+      <div class="invalid-feedback">Name can't be blank</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Name can't be blank</div>
-    <div class="valid-feedback">Looks good!</div>
     <div class="form-text">Text input example</div>
   </div>
 
   <div class="mb-3">
     <label for="exampleInputEmail" class="form-label">Email</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <span class="input-group-text" id="basic-addon1">example-</span>
       <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email" autocomplete="email" required>
       <span class="input-group-text" id="basic-addon1">@gmail.com</span>
+      <div class="invalid-feedback">Email can't be blank</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Email can't be blank</div>
-    <div class="valid-feedback">Looks good!</div>
     <div class="form-text">We'll never share your email with anyone else.</div>
   </div>
 
   <div class="mb-3">
     <label for="exampleInputPassword" class="form-label">Password</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password" autocomplete="current-password" required>
       <span class="input-group-text" id="basic-addon1">🙊</span>
+      <div class="invalid-feedback">Please provide a valid value.</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
     <div class="form-text">Password input example</div>
   </div>
 
   <div class="mb-3">
     <label for="exampleTextareaBio" class="form-label">Bio</label>
-    <div class="input-group">
+    <div class="input-group has-validation">
       <span class="input-group-text">With textarea</span>
       <textarea class="form-control" id="exampleTextareaBio" rows="2" placeholder="Tell us your story" required></textarea>
+      <div class="invalid-feedback">Please provide a valid value.</div>
+      <div class="valid-feedback">Looks good!</div>
     </div>
-    <div class="invalid-feedback">Please provide a valid value.</div>
-    <div class="valid-feedback">Looks good!</div>
     <div class="form-text">Textarea input example</div>
   </div>
 
diff --git a/config/initializers/simple_form_bootstrap.rb b/config/initializers/simple_form_bootstrap.rb
index 178fb7e5..52e4fca8 100644
--- a/config/initializers/simple_form_bootstrap.rb
+++ b/config/initializers/simple_form_bootstrap.rb
@@ -302,12 +302,12 @@
     b.optional :min_max
     b.optional :readonly
     b.use :label, class: 'form-label'
-    b.wrapper :input_group_tag, tag: 'div', class: 'input-group' do |ba|
+    b.wrapper :input_group_tag, tag: 'div', class: 'input-group has-validation' do |ba|
       ba.optional :prepend
       ba.use :input, class: 'form-control', error_class: 'is-invalid', valid_class: 'is-valid'
       ba.optional :append
+      ba.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
     end
-    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
     b.use :hint, wrap_with: { tag: 'div', class: 'form-text' }
   end
 
diff --git a/test/simple_form-bootstrap/input_group_test.rb b/test/simple_form-bootstrap/input_group_test.rb
index 005b42e3..9a33bf87 100644
--- a/test/simple_form-bootstrap/input_group_test.rb
+++ b/test/simple_form-bootstrap/input_group_test.rb
@@ -11,7 +11,7 @@ def test_input_group_prepend
     expected = <<-HTML
       <div class="mb-3 string required user_name">
         <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
-        <div class="input-group">
+        <div class="input-group has-validation">
           <span class="input-group-text">$</span>
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
         </div>
@@ -26,7 +26,7 @@ def test_input_group_append
     expected = <<-HTML
       <div class="mb-3 string required user_name">
         <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
-        <div class="input-group">
+        <div class="input-group has-validation">
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
           <span class="input-group-text">.00</span>
         </div>
@@ -41,7 +41,7 @@ def test_input_group_prepend_and_append
     expected = <<-HTML
       <div class="mb-3 string required user_name">
         <label class="form-label string required" for="user_name">Name <abbr title="required">*</abbr></label>
-        <div class="input-group">
+        <div class="input-group has-validation">
           <span class="input-group-text">$</span>
           <input class="form-control string required" id="user_name" name="user[name]" placeholder="Your name" type="text"/>
           <span class="input-group-text">.00</span>