When scroll bar is clicked bsDatepicker popup hides

Question

I have a fixed height section containing the form. The section has a vertical auto scroll.

The form has a date picker widget (bsDatePicker angular-strap.js)

When I click on the date picker, the calendar pops up the entire calendar is not displayed as it is clipped because of the section height. Form Section shows the vertical scroll bar.

I try to move the mouse to click on the scroll bar to scroll the page down so as to see the entire calendar but as soon as I click on the scroll bar the popup disappears.

This is observed only in IE, Firefox and chrome it works properly. If I use the mouse scroll wheel, the page scrolls properly.

<div class="Reportsection" ng-show="selectedReport()">
<input width="250" type="text" ng-model="reportWidget.start.date"
            name="reportWidget.startDate"
            bs-datepicker
            data-date-format="{{dateFormat}}"
            data-max-date="{{reportWidget.end.date}}"
            placeholder="Choose a Date"
            data-autoclose="true"/>
</div>

.Reportsection{
    overflow-y: auto;
    height: 450px;
    padding-right: 10px;
}