Forms inside a modal dropdown not editable

[et]

Bear with me on this, I'm trying something ridiculous. Essentially, I have a form inside a dropdown menu which is inside a dialog

For whatever reasons, the input fields inside the dropdown are not editable. Input fields outside the dropdown are.

Here is a repository that demonstrates the issue: https://github.com/et/dropdown-experiment

Here are screenshots of what I'm talking about:

Input field editable outside dropdown

Input fields not editable within dropdown.

I've tried tweaking with firebug to isolate the issue but cannot determine what the cause is.

[panosru]

This happens because modal window have z-index of 1002 and the overlay have z-index of 1001 but ul.dropdown-menu have z-index of 900 as a result you can't interact with it as you supposed too...

With first glance in order for this to be fixed z-index: 900; need to be removed from .menu-dropdown, .dropdown-menu { but I'm not sure what side-effect this will cause.

[nexenator]

I experience a similar issue opening a tinymce 4 editor within a modal dialog. The editor itself is working great but fields within dialogs opened by the editor (links, files, source, etc) are not focusable.

Any suggestions on this?

(When clicking into an input field or textarea, only the ok-button below the top modal is focused)