Input problems within XUL browser element

[Aamer]

I've written a Firefox extension that creates a sidebar. The sidebar
UI is implemented in HTML by encapsulating it within a XUL browser
element.

The XUL container for the HTML UI looks something like this -

<vbox>
<browser id="mySidebar">
</browser>
</vbox>

I fill in the HTML UI dynamically via Javascript

// Get the XUL browser element
var sidebar = document.getElementById('mySidebar');
// Access the document object for the browser element
var sidebarDocument = sidebar.contentDocument;
// Create an HTML input box and append it to the browser document
var inputBox = sidebarDocument.createElement('textarea');
sidebarDocument.appendChild(inputBox);

This works fine except the input elements are not behaving very well.
The home and end keys, up and down arrow keys aren't working. Text
selection within the input box is also not working. I see the same
behavior for 'input' elements and even divs with contentEditable=true.

BTW, the same html works fine when I put it into an html file and set
the browser's 'src' attribute to point at the file.

Any ideas on how to get these input elements to work for dynamically
created HTML elements in the browser element?