vnAutocomplete behavior modified to act like ms access combo
This commit is contained in:
parent
7bbc83832b
commit
378f053b18
|
@ -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
|
|
||||||
vn-id="drop-down"
|
|
||||||
on-select="$ctrl.onDropDownSelect(value)">
|
|
||||||
</vn-drop-down>
|
|
||||||
</div>
|
</div>
|
||||||
|
<vn-drop-down
|
||||||
|
vn-id="drop-down"
|
||||||
|
on-select="$ctrl.onDropDownSelect(value)">
|
||||||
|
</vn-drop-down>
|
|
@ -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 = option != -1 && data ? data[option] : null;
|
||||||
let item = 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;
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue