Question

I’m using bootstrap and I want to create a form in a popover. I’ve done this but I can’t type in the textfield of the form. Does anyone know why?

*update It’s inside a modal. Outside the modal it works but inside it doesn’t…

*update2 Almost there I think. When I open modal and popover, I can’t type in the textfield. After I close modal, popover is still open and then I can type in the textfield. So there must be some z-index between the textfield and popup. Real sloppy but I tried input{z-index:9999;} but it didn’t work

<a href="#" class="add_nr" data-nummer-id="nr_1" rel="popover">


<div id="add_number" class="popover">
    <div class="addnr" id="nr_1">
        <form class="form-inline">
            <div class="controls">
                <input type="text" placeholder="Artist">
            </div>
            <div class="controls">
                <input type="text" placeholder="Number">
            </div>
            <a href="#">cancel</a>
            <button type="submit" class="btn">add number</button>
        </form>
    </div>
</div>




$(function(){
        $('.add_nr').on('click', function(event){
            var $this = $(this);
            event.preventDefault();
            $('.add_nr').not($this).popover('hide');
            $this.popover('show');

        }).popover({
            trigger: 'manual',
            placement: 'bottom',
            content: function(e) {
                var $this = $(this),
                nr_id = $this.data('nummer-id');
                return $('#' + nr_id + '.addnr').html();
            }
        })
    });

Answer 1

When a Modal is launched it maintains focus upon itself, preventing the elements in the form from obtaining focus. A simple workaround would be to disable the listener when the modal launches:

$('body').on('shown','.modal', function() {
  $(document).off('focusin.modal')
});