Attach-focus not working in aurelia-dialog

Question

I have the following:

<ai-dialog>
    <ai-dialog-header style="display:flex;justify-content:space-between">
        <span>New Person</span>
        <i class="fa fa-close" style="cursor:pointer" click.delegate="controller.cancel()"></i>
    </ai-dialog-header>

    <ai-dialog-body>
        <div style="display:flex;flex-grow: 1">
            <div class="field">
                <div class="field-title">First Name</div>
                <div class="field-value">
                   <input style="flex-grow:1" type="text" attach-focus="true" value.bind="criteria.firstName & validate" />
                </div>
            </div>
            ....
        </div>
     </ai-dialog-body>

     <ai-dialog-footer>
         ...
     </ai-dialog-footer>

When the dialog is displayed, I'm expecting first name input box to have focus but nothing has focus -- I manually have to click in the box to set focus.

Any thoughts?

One tiny possibility is that attach-focus doesn't work if you have developer console open and active, since the focus jumps to the console log input. — LStarky, Jan 19 '17 at 18:58
Hmm, unable to reproduce. https://gist.run/?id=e92d59f39898802e6fdaa6f1644845a5 — Tarps, Feb 06 '17 at 18:06
Always worth asking, do you have the latest repositories? Do you have any other custom attributes messing things up? Can you create a new skeleton project and reproduce the issue there? Could the flex style be causing some weird focus issues (it's a slim possibility)? Could the `validate` binding on your `value` be causing issues? — Andrew, Feb 08 '17 at 20:53

score 0 · Answer 1 · answered Jul 09 '20 at 12:36

Try the following: focus.bind="true"

<input style="flex-grow:1" type="text" focus.bind="true"...

You could also make the focus depending on the model what you didn't need here.

Here are more details: http://aurelia.io/blog/2015/06/05/building-aurelias-focus-attribute/

Attach-focus not working in aurelia-dialog

1 Answers1