From d86894d8907c1a1c2caf5d7684679ad0b8f6ea5b Mon Sep 17 00:00:00 2001
From: niftylettuce <niftylettuce@gmail.com>
Date: Mon, 17 Sep 2018 11:51:04 -0500
Subject: [PATCH] Added documentation example for BS3 modal shown event binding
 (#12)

* Added documentation example for https://github.com/select2/select2/issues/5189

* Update docs.md
---
 pages/07.dropdown/docs.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/pages/07.dropdown/docs.md b/pages/07.dropdown/docs.md
index f20138be..68a7149b 100644
--- a/pages/07.dropdown/docs.md
+++ b/pages/07.dropdown/docs.md
@@ -92,6 +92,22 @@ $('#mySelect2').select2({
 
 This is useful when attempting to render Select2 correctly inside of modals and other small containers.  If you're having trouble using the search box inside a Bootstrap modal, for example, trying setting the `dropdownParent` option to the modal element.
 
+If you are rendering a Select2 inside of a modal (Bootstrap 3.x) that has not yet been rendered or opened, you may need to bind to the `shown.bs.modal` event:
+
+```
+$('body').on('shown.bs.modal', '.modal', function() {
+  $(this).find('select').each(function() {
+    var dropdownParent = $(document.body);
+    if ($(this).parents('.modal.in:first').length !== 0)
+      dropdownParent = $(this).parents('.modal.in:first');
+    $(this).select2({
+      dropdownParent: dropdownParent
+      // ...
+    });
+  });
+});
+```
+
 If you run into positioning issues while using the default `body` attachment, you may find it helpful to use your browser console to inspect the values of:
 
 - `document.body.style.position`