Неожиданное поведение в typeahead — это ошибка?

У меня есть ввод с использованием typeahead следующим образом:

<input type="text" id="unit" name="unit" class="form-control form-input" ng-model="item.unit"
            autocomplete="off" 
            typeahead-min-length="0" 
            uib-typeahead="unit as unit.symbol for unit in units | typeaheadFilter:{'symbol':$viewValue} | orderBy:smartOrder" 
            typeahead-template-url="unit-template.html" />

А вот и шаблон:

<script type="text/ng-template" id="unit-template.html">
    <a tabindex="-1">
        <div class="row">
            <span class="col-md-6 col-sm-6" ng-bind-html="match.model.symbol | uibTypeaheadHighlight:query"></span>
            <span class="col-md-5 col-sm-5 col-md-offset-1 col-sm-offset-1" ng-bind-html="match.model.name  | uibTypeaheadHighlight:query"></span>
        </div>
    </a>
</script>

в моей коллекции юнитов есть два предмета:

name=kilogram symbol=kg
name=litre symbol=L

На первый взгляд я подумал, что typeahead отлично работает.

Но когда я попробовал приведенные ниже комбинации клавиш, я обнаружил ошибку.

Дело 1

Работает:

Когда я набираю kg в typehead и дважды нажимаю tab, свойство item.unit имеет значение:

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

Не работает:

Но когда я набираю kg в typehead и нажимаю esc, а затем нажимаю tab, свойство item.unit имеет значение:

kg

Дело:2

Работает:

Когда я набираю kg в typehead и дважды нажимаю tab, фокус уходит с элемента управления. Теперь свойство item.unit имеет значение:

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

И затем, если я удалю текст в typeahead с помощью клавиши delete или backspace, то, если я перемещу фокус с typeahead, тогда item.unit будет

undefined.

Не работает:

Когда я набираю кг и дважды нажимаю Tab, фокус уходит с элемента управления. Теперь свойство item.unit имеет значение:

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

И затем, если я удалю текст в typeahead, выбрав текст, а затем используя клавишу delete или backspace, то я перемещу фокус с typeahead, тогда item.unit по-прежнему имеет ценность:

Object {_id: "58cd0cdf28ea727c68be7ac3", name: "Kilogram", symbol: "kg", numberOfDecimalPlaces: 3, isSystemUnit: false…}

Я также поднял вопрос на их странице github.

Планкер:

Вот ссылка на plunker, который воспроизводит проблему: https://plnkr.co/edit/FIPANC3CcliNOeHHANxF


javascript angularjs typeahead angular-ui-bootstrap angular-ui-typeahead
person Vishal    schedule 20.03.2017    source источник
comment
Примечание Киограмм должен быть килограммом   -  person K Scandrett    schedule 06.04.2017
comment
создать плунжер/скрипку, если это возможно?   -  person tanmay    schedule 06.04.2017
comment
Я думаю, что esc убирает фокус с ввода, тогда вкладка не будет работать так, как вы хотите. также нужна скрипка, чтобы я мог видеть это сам.   -  person Pascal Raszyk    schedule 06.04.2017
comment
@tanmay Я обновил свой вопрос ссылкой на плунжер.   -  person Vishal    schedule 06.04.2017
comment
@praszyk Я обновил свой вопрос ссылкой на плунжер.   -  person Vishal    schedule 06.04.2017
comment
@KScandrett Это была опечатка. Обновленный вопрос. Также добавлена ​​ссылка на plunker, воспроизводящий проблему.   -  person Vishal    schedule 06.04.2017

Ответы (1)


arrow_upward
1
arrow_downward

Я не вижу ошибки с опережающим вводом текста

  • В нерабочем случае 1: вы фактически говорите об отмене опережающего ввода (что и делает esc), а затем ваш код говорит отображать все, что связано с элементом input, что в данном случае означает то, что вы ввели - кг. Это ожидаемое поведение (для данного кода).

    Другими словами, вы бы получили точно такой же результат, если бы не было установлено опережающее ввод текста.

  • В нерабочем случае 2 это зависит от того, как вы отойдете после удаления — если вы используете tab дважды, для опережающего ввода будет выбрано предложение по умолчанию 'kg' поэтому первая tab выбирает его, а затем вторая перемещает фокус, поэтому я ожидаю, что он будет установлен на объект «kg». Однако, если вы щелкаете где-то еще после удаления/возврата, тогда значением является пустая строка '', чего я и ожидаю, учитывая, что вы отображаете свойство, привязанное к input.

Итак, настоящий вопрос заключается в том, что вы хотите, чтобы произошло, когда все это произойдет?

ИЗМЕНИТЬ:

Чтобы вернуть соответствующий объект в нерабочем случае 1, вы можете сделать следующее: при выходе из поля, если $scope.unit не установлен в объект, выполнить поиск в массиве:

$scope.unitLostFocus = function(unit) {
  if (typeof unit !== "object") { // typed text so try to match in our array
    var res = jQuery.grep($scope.units, function(n) {
      return ( n.symbol.toLowerCase() === unit.toLowerCase() );
    });
    if (res.length)
      $scope.unit = res[0]; // first match
    else 
      $scope.unit = undefined; // whatever you want to do here when there's no match
  }
  console.log($scope.unit);
};

Обновленный планкер: https://plnkr.co/edit/8YsecsgToP8dtwYHbhD4?p=preview

person K Scandrett    schedule 07.04.2017
comment
ХОРОШО. Если вы считаете, что текущее поведение typeahead нормальное, то это не мое требование. Мое требование заключается в следующем: если я наберу кг, а затем нажму клавишу esc, а затем клавишу табуляции, я хочу, чтобы значение переменной, связанной с вводом, было килограммовым объектом, а не текстом кг. И второй нерабочий случай не может быть воспроизведен. Я посмотрю на это. - person Vishal; 07.04.2017
comment
Я отсутствовал на работе последние четыре дня. Поэтому я не могу проверить ваш ответ. Теперь я проверил это. Это работает нормально. Спасибо за ответ. - person Vishal; 11.04.2017