Ajax Toolkit Combobox Doesn't Work In Hidden Div?

I have a combobox inside a hidden div which I use css display = none to make it invisible, but when I make the div visible by setting display = block, the combobox just show the input and its button and ul list all have css as display = 'none', visibility ='hidden'.

I can tell it is done by combobox inbuild javascript because I tried to use javascript to set the css manually with no luck. It is a bug of combobox. I spent a week to solve this, and our team put a lot trust on the toolkit.

Below is the code to reproduce the bug. When you run it, you can't see the dropdown:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div id="d" style="display:none">
<asp:ComboBox ID="ComboBox1" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>d</asp:ListItem>
<asp:ListItem>f</asp:ListItem>
</asp:ComboBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div ID="Button1" runat="server" onclick="show();">click me</div>
<script type="text/javascript">
function show() {
var d = $get('d');
d.style.display = 'block';
}
</script>