From 240219bc09cdaf9a7c184cb91af9bc7b5cc0b483 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@intracto.com>
Date: Thu, 31 Jan 2019 19:29:05 +0100
Subject: [PATCH] Fix multiple dropdowns in input group

---
 scss/_input-group.scss                  | 11 ++++++-----
 site/docs/4.2/components/input-group.md | 17 ++++++++++++++++-
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index cf4d4436fdb0..cee6008a6dd8 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -82,11 +82,11 @@
     }
   }
 
-  .btn + .btn,
-  .btn + .input-group-text,
-  .input-group-text + .input-group-text,
-  .input-group-text + .btn {
-    margin-left: -$input-border-width;
+  .input-group-text,
+  .btn {
+    &:not(:first-child) {
+      margin-left: -$input-border-width;
+    }
   }
 }
 
@@ -179,6 +179,7 @@
 .input-group > .input-group-append:not(:last-child) > .btn,
 .input-group > .input-group-append:not(:last-child) > .input-group-text,
 .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .dropdown-toggle:nth-last-child(n + 3),
 .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
   @include border-right-radius(0);
 }
diff --git a/site/docs/4.2/components/input-group.md b/site/docs/4.2/components/input-group.md
index cdbfa794a69a..c6928bbb6012 100644
--- a/site/docs/4.2/components/input-group.md
+++ b/site/docs/4.2/components/input-group.md
@@ -211,17 +211,32 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
   <input type="text" class="form-control" aria-label="Text input with dropdown button">
 </div>
 
+<div class="input-group mb-3">
+  <input type="text" class="form-control" aria-label="Text input with dropdown button">
+  <div class="input-group-append">
+    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
+    <div class="dropdown-menu dropdown-menu-right">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div role="separator" class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
+  </div>
+</div>
+
 <div class="input-group">
   <input type="text" class="form-control" aria-label="Text input with dropdown button">
   <div class="input-group-append">
     <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
-    <div class="dropdown-menu">
+    <div class="dropdown-menu dropdown-menu-right">
       <a class="dropdown-item" href="#">Action</a>
       <a class="dropdown-item" href="#">Another action</a>
       <a class="dropdown-item" href="#">Something else here</a>
       <div role="separator" class="dropdown-divider"></div>
       <a class="dropdown-item" href="#">Separated link</a>
     </div>
+    <button class="btn btn-outline-secondary" type="button">Button</button>
   </div>
 </div>
 {% endcapture %}