paper-typeahead-input
paper-typeahead-input copied to clipboard
cheonhyangzhang
Support repeatedly selecting suggestions in FF and IE
It appears that selecting a suggestion only works as expected in Chrome. After the first time in FF and IE, when selecting a second suggestion the index of the selected suggestion is not correct/undefined and the inputValue is set to undefined.
This can be repeated on the demo page of paper-typeahead-input: http://cheonhyangzhang.github.io/paper-typeahead-input/components/paper-typeahead-input/
On the demo page for entering US states, in FF or IE
- Select Oregon. Oregon is set as the inputValue.
- Select Washington. undefined is set as the inputValue.
I have managed to avoid this problem in IE and FF with the following code in the _select function:
// These two lines only work in Chrome (and only the first time in IE and FF)
// index = Number(suggestionsMenu.indexOf(selectedItem));
// this.inputValue = this._suggestions[index];
// The following lines work in Chrome, FF and IE
index = this._suggestions.indexOf(e.model.item);
this.inputValue = this._suggestions[index];
I have tested with FF, the bug is able to be repeated. I will try your solution to avoid the problem.
There is also a similar bug when using arrow key down to move the focused suggestion. Key down to select index 0 of suggestions does not work.
Yes. It seems in Firefox, after first selection, any further suggestions list has wrong index. Say in the second time, suggestion list of [A, B, C], index for each element is 3, 4, 5 instead of 0, 1, 2. So that down key stops working because we are trying to select 0 but there is no element with index 0, and selection failed because when you select, the index is 3 and there is not array[3], so it turns to be undefined to the input value.
This is the reason behind the scene. Caused by confusing index in Firefox.
Haven't found an element solution so far.