Суть бага в том, чтобы сделать клик менее чем за 100 мс. Получается, что у людей с богатым опытом использования компьютера (профессиональным, игровым) скорость выше. У людей старшего поколения и тех кто с компьютером на Вы ничего не выходит.

owniumo Sep 3 2015 at 03:12

Неточное описание поведения

Сначала у меня получалось не всегда.
Потом я нашёл надёжный способ выбрать любой пункт —
1.открыть дропдаун
2. не торопясь посмотреть на варианты
3. тут надо успеть за 100мс: нажать/зажать ctrl или shift или alt и сразу кликнуть мышкой

также работает если зажать кнопку заранее, потом отпустить и быстро кликнуть, но намного менее надёжно

tamtakoe Sep 3 2015 at 06:29

У меня и моих коллег получалось в 100% случаев обычным щелчком. Специально хотели воспроизвести баг, но не могли. Только потом, когда понял в чем суть, удалось воспроизвести)

maxsolovev Aug 30 2015 at 10:52

Долго не мог понять в чём дело, но всё же баг воспроизвёл. Посему вопрос: как можно было так криво сделать?

tamtakoe Aug 30 2015 at 11:19

Это появилось из-за хака для всех браузеров кроме Хрома. В этих браузерах нельзя понять чем было вызвано событие blur, переводом фокуса или программно, поэтому пришлось проверять через некоторый промежуток времени что инпут действительно потерял фокус и триггерить blur на элементе селекта. Причем из-за особенностей браузерной работы с событиями этот промежуток времени не маленький. С 10 мс не работало, с 50 мс через раз. github.com/tamtakoe/oi.select/blob/0.2.8/src/services.js#L99

youlose Aug 30 2015 at 18:10

А какая разница как вызывается blur? Зачем этот хак?

tamtakoe Aug 30 2015 at 19:43

Без него в FF, IE и проч. не будет работать переход по табу. Т.е. фокус сместится с одного инпута на другой, но компонент об этом никак не узнает, т. к. нет элемента в event.relativeTarget и он подумает, что blur был вызван программно и не станет вызывать его второй раз.

Magister7 Aug 30 2015 at 16:33

А я, кажется, второй баг нашел — на странице «Funny» выбор с клавиатуры (нажатием Enter) не работает вообще никак.
Решил что я, наверное, совсем плохой программист )))

Magister7 Aug 30 2015 at 16:37

вот блин, внизу уже ответили. извиняюсь, недочитал комментарии…

a553 Aug 30 2015 at 05:05

На странице Customization не скроллится список тачем, если при открытом списке тапнуть на строку. Win 10 + Firefox 41

tamtakoe Sep 4 2015 at 11:45

Это на телефоне?

a553 Sep 4 2015 at 12:40

На десктопе.

tamtakoe Sep 4 2015 at 13:50

Странно. В последней версии тоже?

artemmalko Aug 30 2015 at 07:33

Пара багов:
1) 938 пикселей по ширине экран www.dropbox.com/s/qupszykt884axpb/Screenshot%202015-08-30%2013.24.55.png?dl=0
2) Не открывается вверх, если места снизу нет www.dropbox.com/s/k8vbs275eirphyt/Screenshot%202015-08-30%2013.25.31.png?dl=0
3) Если открыть выпадашку стрелками, то автокамплит не работает, нельзя ввести значение, можно только выбрать. Хотя, это может быть и фича такая.

Пара замечаний:
1) На мобильных устройствах желательно оставлять оригинальный селект.
2) Если у контейнера, в котором лежит селект будет overflow:hidden, то могут быть неприятные баги. Например, обрезанная выпадашка.
3) Еще не нашел оригинального селекта на странице. Он удаляется?

tamtakoe Aug 30 2015 at 12:00

Баги:
1) поправлю
2) Стандартный селект не поднимается наверх

Но идея хорошая, нужно будет сделать с помощью CSS.
3) не удалось повторить. Это в каком примере наблюдается?

Замечания:
1) В мобильных устройствах так же нет автокомплита, поэтому стандартный селект не прокатит.
2) Не знаю как это побороть и надо ли. Тут, наверное, будет лучше сделать вариант с выпадашкой наверх.
3) Стандартного селекта там нет. С ним получалось слишком костыльно.

artemmalko Aug 30 2015 at 12:53

2) Открывается наверх, попробуйте сделайте селект в самом низу страницы, без открытых дев-тулзов. Он откроется вверх.
3) В любом. Просто делаете фокус на селект и нажимаете стрелку вниз. Селект откроется, а написать ничего нельзя.

Про замечания:
1) Видимо стоит только для этого случая оставить кастомный. В остальных случаях 100% удобнее пользоваться нативным.
2) Стоит, неизвестно, в каком месте селект будет вызываться. Побороть легко, просто держите выпадашку в самом низу body и подцепляйте ее при открытии к селекту.
3) А в чем были костыли?

tamtakoe Aug 30 2015 at 19:40

3) Странно. У меня можно писать и в Хроме и в ФФ. Что за система/браузер?

Подумаю, чтобы аппендить выпадашку к body или сделать такую опцию как в angular-bootstap для тултипов

Пробовал способ, когда в основе лежит стандартный селект, скрытый из виду, и в него копируются опции из oi-select. Нужно было перекомпилировать элемент, следить чтобы связь между областями видимости не порвалась при использовании, например, ng-if на директиве. Код был сложнее для восприятия, да и смысла не было, т. к. всё равно почти вся функциональность не была привязана к стандартному селекту.

artemmalko Aug 31 2015 at 03:26

tamtakoe.github.io/oi.select/#/select/#grouping клик на стрелку или открытие клавишами не дает вводить ничего. Mac Ось, любой браузер.

tamtakoe Aug 31 2015 at 04:17

А, на эту стрелку. Поправлю в следующей версии

lega Aug 30 2015 at 11:01

Почему не взяли select2?

tamtakoe Aug 30 2015 at 11:37

Во-первых, он на jQuery, который уже как пол года назад удалось выпилить из проекта. Из jQuery нужна была только функция определения высоты элемента (меньше 100 строчек). Тащить ради нее всю библиотеку как-то странно.
Во-вторых, никакой совместимости по АПИ там и близко нет. Пришлось бы писать огромный адаптер или мучиться.
В-третьих, слишком много отсебятины. Для множественного выбора поле ввода находится в строке с выбранными элементами, для одиночного — в списке, чтобы удалить тег нужно попасть по маленькому крестику, какие-то крестики для одиночного ввода… Не продуманный дизайн. Такое ощущение, что его писали разные люди, которые не смогли договориться.

ZOXEXIVO Aug 30 2015 at 20:11

А как насчет angular-ui-select?

tamtakoe Aug 30 2015 at 20:36

Практически то же самое. Год назад он был самым вменяемым, но, по сути, представлял обертку над select2, тащил jQuery и был глючным. Сейчас плагины подросли, но до уровня oi.select все еще не дотягивают. Пока ни один плагин не учитывает, что у Ангуляра есть готовое АПИ для селекта и предлагает свое, а это показатель уровня разработчиков.

P. S. Понравился в свое время brianreavis.github.io/selectize.js, с него скопировал лучшие наработки в дизайне.

Methos Sep 2 2015 at 07:14

Кстати, на jquery мне нравится chosen

tamtakoe Sep 2 2015 at 22:31

По-моему, слишком много отсебятины. Какие-то крестики для очистки модели в одиночном инпуте. Для одиночного и множественного селекта поля поиска выглядят по-разному, список не закрывается по щелчку на пустом поле ввода (родной селект так себя не ведет). И как-то всё неаккуратно.

Methos Sep 3 2015 at 11:02

очистка в одиночном удобно, если есть несколько зависимых списков.

например,

страна — город — улица

тогда при очистке страны очищается и страна, и все зависимые.

одним кликом

tamtakoe Sep 4 2015 at 11:44

Показываю крестик в варианте cleanModel: true (http://tamtakoe.github.io/oi.select/#/select/#cleanmodel)

Там модель очищается при клике в любом месте. Не сторонник маленьких кнопочек и крестиков, по которым фиг попадешь, особенно на мобильном устройстве)

Methos Aug 30 2015 at 11:12

А есть так, чтобы было как это tamtakoe.github.io/oi.select/#/select/#editableoptions, но с возможностью добавлять свои таги, а не только те, которые есть в списке?

tamtakoe Aug 30 2015 at 11:23

См. prompt, autocomplete. Об особенностях описано в статье

Methos Aug 31 2015 at 13:03

у вас здесь отсутствует запятая

tamtakoe Aug 31 2015 at 13:09

Поправил

Methos Aug 31 2015 at 13:26

вероятно, здесь в конце нужно писать newItemFn?

tamtakoe Sep 3 2015 at 06:31

Поправил

Methos Aug 31 2015 at 13:30

какой-то странный баг — добавляет только ОДНО, первое значение. а дальше — ничего…

и только если редактируешь и опять добавляешь, тогда начинает добавлять и дальше.

Methos Aug 31 2015 at 13:35

Это решено, у меня были дубли в id.

Methos Aug 31 2015 at 13:39

Как customize delete button?

tamtakoe Aug 31 2015 at 14:37

delete button на самом деле нет. Ее добавляет фильтр по-умолчанию

.filter('oiSelectCloseIcon', ['$sce', function($sce) {
    return function(label) {
        var closeIcon = '<span class="close select-search-list-item_selection-remove">×</span>';

        return $sce.trustAsHtml(label + closeIcon);
    };
}])

В selectFilter можно переопределить на свой фильтр и делать там что угодно

Methos Aug 31 2015 at 13:40

Почему, когда фокус убирается с поля ввода, элемент добавляется? Возможно ли сделать так, чтобы добавлялся только по enter?

tamtakoe Aug 31 2015 at 14:49

Вообще, не должен. Разве что в случае с одиночным селектом. Он показывает выбранное ранее значение. Это сделано специально, т. к. так ведет себя обычный селект

Methos Aug 31 2015 at 13:42

Баг — если редактируешь значение, то если в это время удалить другой элемент, то пропадают оба элемента.

tamtakoe Aug 31 2015 at 14:59

Сейчас если стоит режим редактирования элементов, то удалить элемент как-бы нельзя. Т. е. из модели он удаляется, но на его месте остается его текст. Если вводить какой либо текст и удалить при этом любой элемент, то вводимый ранее текст заменится на текст удаленного элемента. Должно так работать

Methos Aug 31 2015 at 14:20

how to customized full own template.html?

tamtakoe Aug 31 2015 at 15:01

template.html очень не рекомендуется заменять на свой, т. к. это может нарушить работу элемента. Постарался сделать так, чтобы внешний вид можно было полностью настроить фильтрами и стилями.

Methos Aug 31 2015 at 19:00

спасибо, буду пытать

Methos Aug 31 2015 at 13:07

и ещё

newItemModel: {id: null, name: $query},

как-бы id автоинкремент сделать?

update: понял, использовать newItemFn

sajgak Aug 30 2015 at 12:36

по поводу бага — выбор по enter тоже не работает))

tamtakoe Aug 30 2015 at 12:59

Я его специально запретил в том примере, чтобы не хитрили)

serf Aug 30 2015 at 13:20

Вот такое еще есть mbenford.github.io/ngTagsInput/demos

tamtakoe Aug 30 2015 at 19:56

Неплохой мультиселект. Некоторые примеры ведут себя не очевидным образом. У меня на первых порах тоже такое было. А вот валидацию текстового ввода возьму на заметку.

Dzorogh Aug 30 2015 at 22:10

Спасибо за классную реализацию сохранения новой модели (http://tamtakoe.github.io/oi.select/#/select/#prompt).
Давно пытался найти такой плагин.

Сейчас очень серьезно размышляю о переходе с angular-ui/ui-select на ваше решение в своем большом проекте.

Подскажите, можно ли сделать вывод списка вот в таком формате:

Скриншот из демки ui-select

Нужно, чтобы в выпадающем меню выводилось несколько разных параметров, согласно моему шаблону, и чтобы работал фильтр (поиск) по всем параметрам (или, как это можно в ui-select, по тем, которые нужны).
Я нашел только такой пример — http://tamtakoe.github.io/oi.select/#/select/#customization, но там фильтр не работает совсем.

tamtakoe Aug 31 2015 at 10:35

Ответил случайно в корень, а не в эту тему. Запилил простенькую реализацию поиска по другим полям для плоских объектов tamtakoe.github.io/oi.select/#/select/#filtered

Dzorogh Sep 1 2015 at 02:47

Спасибо за ответ и пример.

tamtakoe Aug 31 2015 at 01:09

Для форматирования выбранных тегов нужно использовать searchFilter, для вариантов в списке — dropdownFilter. Поиск осуществляется только по одному полю, указанному в oi-options (что полностью соответствуют ng-options), но можно самому формировать поисковую выдачу:
— задать в качестве списка функцию, принимающую поисковую строку и возвращающую список tamtakoe.github.io/oi.select/#/select/#lazyloading
— переопределить listFilter в который передается поисковая строка и список в которой так же можно как угодно этот список фильтровать tamtakoe.github.io/oi.select/#/select/#customization

Вообще, подумаю, чтобы расширить встроенный listFilter, чтобы туда передавать параметры для поиска по другим полям.

P. S. Как минимум в одном большом проекте это решение уже используется — в моём, так что если какие-то серьезные баги всплывают, узнаю об этом очень быстро)

Methos Sep 1 2015 at 09:16

Можно ли сделать autocomplete по ajax?

tamtakoe Sep 1 2015 at 20:22

Запросто. Возвращай промис в функции, формирующей список и ищи в базе по строке tamtakoe.github.io/oi.select/#/select/#lazyloading

Methos Sep 2 2015 at 07:13

ok, thanks

Methos Sep 3 2015 at 11:40

А как сделать так, чтобы oi-options первоначально принял массив, а уже потооом был бы autocomplete?

tamtakoe Sep 4 2015 at 11:48

функция, возвращающая список вариантов по строке должна возвращать все варианты, если строка пустая… Если правильно понял что было нужно

Methos Sep 3 2015 at 11:05

как повесить на Enter обработчик события?

tamtakoe Sep 4 2015 at 11:51

Никак нельзя (конечно, можно обернуть все в свою директиву или найти элемент селекта в контроллере, а там найти инпут и повеситься на Enter, но это нехорошо).

Нужно следить за изменением модели с помощью watch и выполнять нужные действия. Так код будет максимально независим от элемента селекта.

Methos Sep 10 2015 at 10:54

Вы могли бы добавить в код возможность подписки на событие keyDown в поле ввода?

tamtakoe Nov 13 2015 at 07:47

В будущем перенесу нативные события инпута на елемент компонента

Methos Sep 10 2015 at 12:00

И ещё есть баг — если в пустое поле ввода сделать фокус, то вызывается функция autocomplete с пустым запросом. Думаю, нужно сделать так, чтобы не вызывалась.

tamtakoe Nov 13 2015 at 07:42

Так специально сделано. При пустом запросе часто возвращают либо весь список либо популярные значения

Methos Sep 14 2015 at 09:33

К сожалению, пришлось отказаться от вашего плагина по причине отсутствия API событий и возможности расширения.
Сделал на коленке за часик свой редактор тагов.

tamtakoe Nov 13 2015 at 07:47

События это зло. Их просто использовать, но невозможно отлаживать и они сильно ломают логику приложения. Лучше избегать их по возможности. Над расширением подумаю

doozza Dec 22 2015 at 10:30

Спасибо вам за плагин. Постепенно осваиваем как прозрачную замену чёрному ящику из костылей select2.

Пока возник вопрос с динамическими интерполяциями.

В нашем случае на форме при смене типа автомобиля меняется источник данных для списка трансмиссий, и одновременно обязательность этого поля. Если поле становится необязательным, пользователь должен уметь его очистить. В директиве есть опция


cleanModel

, но она проверяется один раз при компиляции, так что oi-select-options="{cleanModel:isRequired(vehicleType)}" выполнится только для исходного состояния формы. Смена vehicleType не приведёт к вычислению нового значения cleanModel и не разрешит очищать поле.

Есть ли возможность реализовать разбор elementOptions динамически и навесить этот разбор на нужные $watch (в нашем случае, смена источника данных)? Перекомпилировать всю директиву ради этого выглядит большим оверхедом.

Спасибо!

tamtakoe Dec 22 2015 at 22:27

Посмотрю что можно сделать. Не обещаю, но постараюсь до нового года