How can I get auto focus to an input element in a

Question

I asked this question and got a great answer, so now I have a dynamic template in knockout, which works great, except in IE I can't get the dynamic template to set the focus in one of the input fields when the popup is rendered. Adding the autofocus to the tem,plate script text works in chrome, but I'd like it to work in IE as well, but can't seem to get it to.

modal = {
    header: ko.observable("This is a modal"),
    //this is now just the name of the template
    body: ko.observable('bodyTemplateA'),
    // ...
};

And then in your binding, do

<div class="modal-body" data-bind="template: { name: body }">
</div>

and then of course define all of your needed templates separately:

<script id="bodyTemplateA" type="text/html">
     Name:<input id='workflowname' autofocus type="text" data-bind="value: paramName" /><br/>
     Type:<input type="text" data-bind="value: paramType" /><br />
</script>

I tried using the knockout hasfocus binding:

<script id="bodyTemplateA" type="text/html">
     Name:<input autofocus type="text" data-bind="value: paramName, hasfocus: true" /><br/>
     Type:<input type="text" data-bind="value: paramType" /><br />
</script>

but that doesn't seem to work.

I also tried adding some jquery into the function which shows the form:

self.showStepModal = function () {
    self.newStepModal.show(true);
    //tried both of the following lines but neither seems to work...
    $('[autofocus]:not(:focus)').eq(0).focus();
    $('#workflowname').focus();
};

What can I do to set the focus into the input tagged with autofocus after the template has been rendered?

Answer 1

I traced your prior questions leading to this (here and here), and saw that you were using Bootstrap for the modal. I am answering this question under that context.

Within a Modal

To get it working with a modal, the key is to point the hasFocus binding to an observable (isFocused in this example), and toggle its value after the modal has rendered, via the shown.bs.modal event.

See fiddle: http://jsfiddle.net/JasperTey/CRnXW/.

HTML

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel" data-bind="text: header"></h4>
            </div>
            <div class="modal-body" data-bind="template: { name: body }"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script id="bodyTemplateA" type="text/html">
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" data-bind="value: name, hasFocus: isFocused" />
    </div>
    <div class="form-group">
    <label>Type</label>
        <input type="text" class="form-control" data-bind="value: type" />
    </div>
</script>

JavaScript

// View Model
var modal = {
    name: ko.observable(),
    type: ko.observable(),

    header: ko.observable("This is a modal"),
    body: ko.observable('bodyTemplateA'),

    isFocused: ko.observable(false)
};
ko.applyBindings(modal);

// This event is fired when the modal has been made visible to the user
$('#myModal').on('shown.bs.modal', function(){
    modal.isFocused(true);
});

Non-modal Case

When using a knockout template in a regular non-modal scenario, the hasFocus binding should work as per your original expectations. Either explicitly via hasFocus: true, or hasFocus: isFocused where isFocused is initialized to true.

See fiddle of non-modal example: http://jsfiddle.net/JasperTey/4gzKu/