Fix Modal documentation about _handleUpdate method + move to public scope (#21877)

Fix Modal documentation about _handleUpdate method + move to public scope

diff --git a/docs/components/modal.md b/docs/components/modal.md
index deb25c4dc42401c5caad786fed5c103e12f1637c..96a11e1a2d9957443a311d23413ebb63e8660a4a 100644 (file)
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -410,7 +410,7 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl
 
 ### Dynamic heights
 
-If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` to readjust the modal's position in case a scrollbar appears.
+If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` or `$('#myModal').modal('handleUpdate')` to readjust the modal's position in case a scrollbar appears.
 
 ### Accessibility
 
@@ -575,6 +575,12 @@ Manually hides a modal. **Returns to the caller before the modal has actually be
 
 {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
 
+#### `.modal('handleUpdate')`
+
+Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
+
+{% highlight js %}$('#myModal').modal('handleUpdate'){% endhighlight %}
+
 ### Events
 
 Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).

diff --git a/js/src/modal.js b/js/src/modal.js
index 9263efd536f3309ef5f6afb57215bcdfcaecf4a6..7f010b8e09b2a7a9648a0f5ce508f109272764a0 100644 (file)
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -215,6 +215,9 @@ const Modal = (($) => {
       this._scrollbarWidth      = null
     }
 
+    handleUpdate() {
+      this._adjustDialog()
+    }
 
     // private
 
@@ -296,7 +299,7 @@ const Modal = (($) => {
 
     _setResizeEvent() {
       if (this._isShown) {
-        $(window).on(Event.RESIZE, (event) => this._handleUpdate(event))
+        $(window).on(Event.RESIZE, (event) => this.handleUpdate(event))
       } else {
         $(window).off(Event.RESIZE)
       }
@@ -401,10 +404,6 @@ const Modal = (($) => {
     // todo (fat): these should probably be refactored out of modal.js
     // ----------------------------------------------------------------------
 
-    _handleUpdate() {
-      this._adjustDialog()
-    }
-
     _adjustDialog() {
       const isModalOverflowing =
         this._element.scrollHeight > document.documentElement.clientHeight