MDC select dropdown jumps to bottom

I am using mdcselect for my project.

<div class="trailer-size-sort sort-dropdown loading">
        <div  class="mdc-select mdc-trailer-size">
        <span class="mdc-floating-label" id="size" style="">Size</span>
        <div class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-label="label">Value</div>
        <div class="mdc-select__menu mdc-trailer-size--list mdc-menu mdc-menu-surface detatched-list" role="listbox">
        <ul class="mdc-list">
           <li class="mdc-list-item" data-value = "some value1">some value1</li>
          <li class="mdc-list-item" data-value = "some value2">some value2</li>
         <li class="mdc-list-item" data-value = "some value3">some value3</li>
        </ul>

now even though the select box is rendering properly, the drop down jumps to the bottom of the page on click,

the “top” is not calculated.

when it doesnt work
enter image description here

when it works
enter image description here

unable to find the root cause of this behavior.