Sorry for the complex title of this post. I will try to clarify my issue.
Lately, I built a lookup component, which is essentially an input element and a dropdown list element. When typing in the input element, the dropdown is shown and items that contain the typed text are shown in the top of the list (with some highlighting on the matches). When an item is selected from the list, the lookup’s item
property is set. This is a bindable property, so that client code can react to a change of the lookup’s selected item.
Currently, I am building a multiselect component, which is essentially an inline (horizontal) list of selected items (shown as tags/labels/badges), followed by my previously created lookup component for selecting new items. Selected items can be removed by clicking its tag/label/badge.
Selected items should be unique (for now), so when I select a new item from the lookup dropdown, it should be shown as a tag/label/badge in front of the lookup control. the lookup control’s value should be cleared, and the item should be removed from the lookup’s dropdown list.
It all works!
Well… almost…
For some reason, clearing the lookup’s value after a selection does not seem to work properly.
Below is a TypeScript example that reproduces the issue.
my-control.html:
<template>
<input value.bind="inputValue">
</template>
my-control.ts:
import { bindable, bindingMode, observable } from 'aurelia-framework';
export interface Item {
value: string;
}
export class MyControl {
@bindable({ defaultBindingMode: bindingMode.twoWay }) item: Item | null = null;
@observable inputValue: string = '';
itemChanged(item: Item | null) {
this.inputValue = (item) ? item.value : '';
}
inputValueChanged(value: string) {
this.item = (value) ? { value } : null;
}
}
app.html:
<template>
<require from="./my-control"></require>
<my-control item.bind="myControlItem"></my-control>
</template>
app.ts:
import { observable } from 'aurelia-framework';
import { Item } from './my-control';
export class App {
@observable myControlItem!: Item | null;
myControlItemChanged(item: Item) {
if (item) {
console.log(item.value);
this.myControlItem = null;
}
}
}
When running this code, I press the A, S, D, and F keys in the <input>
element.
After pressing the A key, the console shows a
and the <input>
is cleared. (Nice.)
After pressing the S key, the console shows s
, but the <input>
is not cleared. (Huh?)
After pressing the D key, the console shows sd
and the <input>
is still not cleared. (Hey!)
After pressing the F key, the console shows sdf
and the <input>
is still not cleared. (Aargh!)
Is this a known issue? How can I get this to work so that the <input>
element will be cleared after every value change, and not only after the first value change?
Thank you very much in advance.