valor-software / ng2-select

Angular based replacement for select boxes
http://valor-software.github.io/ng2-select/
MIT License
676 stars 588 forks source link

Del key not deleting marked search text #950

Open dave0688 opened 6 years ago

dave0688 commented 6 years ago

When I type something in the dropdown to search for an option, then mark a part of the text and press the del key, the marked text does not get deleted. Everything works as expected when I delete marked text with backspace.

Is there any way to fix this?

wallaceiam commented 6 years ago

Hi @dave0688,

Just had something similar - here is how I worked around it in select.ts

`

public inputEvent(e: any, isUpMode: boolean = false): void { if (isUpMode && (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13)) { e.preventDefault(); return; } // backspace if (!isUpMode && e.keyCode === 8) { let el: any = this.element.nativeElement .querySelector('div.ui-select-container > input'); if (!el.value || el.value.length <= 0) { if (this.active.length > 0) { this.remove(this.active[this.active.length - 1]); } e.preventDefault(); } } // esc if (!isUpMode && e.keyCode === 27) { this.hideOptions(); this.element.nativeElement.children[0].focus(); e.preventDefault(); return; } // del if (!isUpMode && e.keyCode === 46) { if (this.active.length > 0) { this.remove(this.active[this.active.length - 1]); } else { // we want to remove some text const el: any = this.element.nativeElement.querySelector('div.ui-select-container > input'); if (el.value && el.value.length > 0) { const pos = { start: el.selectionStart, end: el.selectionEnd }; const newValue = el.value.substring(0, pos.start) + el.value.substring(pos.start === pos.end ? pos.start + 1 : pos.end); el.value = newValue; setTimeout(() => { el.setSelectionRange(pos.start, pos.start, 'none'); }); } } e.preventDefault(); } // up if (!isUpMode && e.keyCode === 38) { this.behavior.prev(); e.preventDefault(); return; } // down if (!isUpMode && e.keyCode === 40) { this.behavior.next(); e.preventDefault(); return; } // enter if (!isUpMode && e.keyCode === 13) { if (this.active.indexOf(this.activeOption) === -1) { this.selectActiveMatch(); this.behavior.next(); } e.preventDefault(); return; } let target = e.target || e.srcElement; if (target && (target.value || target.value === '')) { this.inputValue = target.value; this.behavior.filter(new RegExp(escapeRegexp(this.inputValue), 'ig')); this.doEvent('typed', this.inputValue); } else { this.open(); } } `