javascript - Aurelia-dialog using attach-focus on custom element -

i'm trying pass attach-focus="true" 1 of inner elements of custom element correct element receive focus when aurelia-dialog opens.

custom element: enum-list.html

<template>   <label class="control-label">${label} debug: ${attach-focus}</label>   <select class="form-control" value.bind="value" attach-focus.bind="attach-focus">     <option if.bind="data" repeat.for="code of data | keys" value="${code}">${data[code]}</option>   </select> </template> 

custom element: enum-list.js

import { bindable, bindingmode } 'aurelia-framework'; export class enumlistcustomelement {   @bindable label;   @bindable data;   @bindable attach-focus; // <-- maybe source of error?   @bindable({ defaultbindingmode: bindingmode.twoway }) value; } 

dialog template: edit-locale.html:

<template>   <ai-dialog>     <ai-dialog-header class="modal-header modal-header-success">       <h4 class="modal-title">edit locale</h4>     </ai-dialog-header>     <ai-dialog-body>       <form>         <enum-list attach-focus="true" label="language" data.bind="core.enums.systemlanguage" value.bind="sch_lang"></enum-list>         <enum-list label="currency" data.bind="core.enums.currencycode" value.bind="sch_currency"></enum-list>       </form>     </ai-dialog-body>     <ai-dialog-footer>       <button type="button" click.trigger="dialogcontroller.cancel()">cancel</button>       <button type="button" click.delegate="dialogcontroller.ok()">save</button>     </ai-dialog-footer>   </ai-dialog> </template> 

instantiation (from vm js):

this.dialogservice.open({ viewmodel: editlocale, model: this.record, lock: true }).then(response => { 

the modal dialog loads fine if remove dashes attach-focus in edit-locale.js , inside custom element. dash, i'm getting error: uncaught syntaxerror: unexpected token import. think dash interfering don't know how fix it.

my preference fix instantiation of custom control has standard parameter attach-focus="true" (with dash) it's consistent normal elements input , select.

you right source of error, can't have property-name containing dash. because reads property - name.

there convention in aurelia (link docs, search dash-case) map attributes , elements name dash notation camelcase notation, if in model name bindable property @bindable attachfocus - able use in views attach-focus.bind="true".

also make sure <require> custom elements/attributes in views or make them globally available when configuring aurelia.