What is the best “decoupled” way to give focus to an Aurelia component?

Question

Let's say I've built some kind of Aurelia component. For this example, let's say I've built a hypothetical component called ui-money.

Let's say that the ui-money component comprises a text input element, and another element (eg. span) alongside the input that shows an exchange rate. In essence, something like:

<template>
   <input value.bind="amountStr" ... >
   <span>${exchange_rate}</span>
</template>

I then build an Aurelia view (page) which includes the <ui-money> element.

My question is this: let's say I want to put focus onto the "ui-money" element.

Practically speaking, I don't want to know the internal makeup of the ui-money element (white-box knowledge), nor should I want it. But clearly I need the focus to go to the INPUT element WITHIN the ui-money element.

So, it would seem that I need to ask the ui-money element to perform the act of setting focus, for me.

Now the most obvious first option would be to supply a ref to the ui-money element as such <ui-money ref="purchasePriceUx"> and have the ui-money view-model expose some kind of takeFocus() method. We could then invoke purchasePriceUx.takeFocus() .

But I'm interesting in knowing if there is a better way to achieve this, whilst still retaining the same level of decoupling.

Answer 1

You can use bindable properties and the focus attribute that ships with the standard configuration of the framework: https://gist.run/?id=7587f1453cb2632fa09b6fe542d9717c

The important stuff is here:

app.html

<template>
  <require from="./some-element"></require>

  <label for="hasFocus">Has Focus:</label> 
  <input id="hasFocus" type="checkbox" checked.bind="focus" />

  <div>
    Custom Element:
    <some-element has-focus.bind="focus" text.bind="text"></some-element>
  </div>
  <div>
    Regular text box: 
    <input type="text" value.bind="text" />
  </div>
</template>

some-element.html

<template>
  <input ref="textbox" type="text" value.bind="text" focus.bind="hasFocus" />
</template>

some-element.js

import {bindable, bindingMode} from 'aurelia-framework';

export class SomeElement {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) text;

  // the bound property cannot be named focus as it interferes with
  // the focus custom attribute
  @bindable({ defaultBindingMode: bindingMode.twoWay })  hasFocus;
}