vnAutocomplete behavior modified to act like ms access combo

This commit is contained in:
Juan 2018-03-17 13:17:48 +01:00
parent 7bbc83832b
commit 378f053b18
3 changed files with 19 additions and 15 deletions

View File

@ -16,8 +16,8 @@
</div> </div>
<label class="mdl-textfield__label" translate>{{::$ctrl.label}}</label> <label class="mdl-textfield__label" translate>{{::$ctrl.label}}</label>
</div> </div>
<vn-drop-down </div>
<vn-drop-down
vn-id="drop-down" vn-id="drop-down"
on-select="$ctrl.onDropDownSelect(value)"> on-select="$ctrl.onDropDownSelect(value)">
</vn-drop-down> </vn-drop-down>
</div>

View File

@ -45,6 +45,9 @@ export default class DropDown extends Component {
this._search = value; this._search = value;
this.$.model.clear(); this.$.model.clear();
if (value != null)
this._activeOption = 0;
this.$timeout.cancel(this.searchTimeout); this.$timeout.cancel(this.searchTimeout);
this.searchTimeout = this.$timeout(() => { this.searchTimeout = this.$timeout(() => {
this.refreshModel(); this.refreshModel();
@ -86,8 +89,8 @@ export default class DropDown extends Component {
* @param {String} search The initial search term or %null * @param {String} search The initial search term or %null
*/ */
show(search) { show(search) {
this.search = search;
this._activeOption = -1; this._activeOption = -1;
this.search = search;
this.buildList(); this.buildList();
this.$.popover.parent = this.parent; this.$.popover.parent = this.parent;
this.$.popover.show(); this.$.popover.show();
@ -101,7 +104,7 @@ export default class DropDown extends Component {
} }
/** /**
* Activates a option and scrolls the drop-down to that option. * Activates an option and scrolls the drop-down to that option.
* *
* @param {Number} option The option index * @param {Number} option The option index
*/ */
@ -122,7 +125,7 @@ export default class DropDown extends Component {
} }
/** /**
* Activates a option. * Activates an option.
* *
* @param {Number} option The option index * @param {Number} option The option index
*/ */
@ -146,10 +149,11 @@ export default class DropDown extends Component {
* @param {Number} option The option index * @param {Number} option The option index
*/ */
selectOption(option) { selectOption(option) {
if (option != -1) {
let data = this.$.model.data; let data = this.$.model.data;
let item = data ? data[option] : null; let item = option != -1 && data ? data[option] : null;
let value = item ? item[this.valueField] : null;
if (item) {
let value = item[this.valueField];
if (this.multiple) { if (this.multiple) {
if (!Array.isArray(this.selection)) { if (!Array.isArray(this.selection)) {
@ -252,6 +256,9 @@ export default class DropDown extends Component {
let nOpts = data ? data.length - 1 : 0; let nOpts = data ? data.length - 1 : 0;
switch (event.keyCode) { switch (event.keyCode) {
case 9: // Tab
this.selectOption(option);
return;
case 13: // Enter case 13: // Enter
this.selectOption(option); this.selectOption(option);
break; break;

View File

@ -96,9 +96,6 @@ export default class Popover extends Component {
if (this.deregisterCallback) if (this.deregisterCallback)
this.deregisterCallback(); this.deregisterCallback();
if (this.parent)
this.parent.focus();
if (this.onClose) if (this.onClose)
this.onClose(); this.onClose();
} }