Why does DropDownList width vary when data-width="auto" using Bootstrap 4 and selectpicker?

Question

I have an asp.net webforms project that uses Bootstrap 4. It has a master page that contains an ascx user control with an asp DropDownList. It uses the CssClass selectpicker and is set to a data-width of "auto"; however the width of the dropdown varies between two sizes. When the screen is loaded or refreshed, about 80% of the time the width correctly matches the width of the longest item in the dropdown list; but about 20% of the time it is not wide enough. Any idea what could cause this? Correct Width Incorrect Width

Here are the partial contents of the user control:

        </ul>
        <ul class="navbar-nav">
            <li class="nav-item ">
                <div class="form-group m-0">
                    <asp:DropDownList ID="DD_Facility"
                        AutoPostBack="True"
                        OnSelectedIndexChanged="Selection_Change"
                        runat="server"
                        CssClass="selectpicker "
                        data-live-search="true"
                        data-width="auto">
                    </asp:DropDownList>
                </div>
            </li>
        </ul>
    </div>
</nav>