diff --git a/app/assets/javascripts/protocols/header.js b/app/assets/javascripts/protocols/header.js index bf397d4e1..94ba6381d 100644 --- a/app/assets/javascripts/protocols/header.js +++ b/app/assets/javascripts/protocols/header.js @@ -3,7 +3,6 @@ var ProtocolRepositoryHeader = (function() { function initEditKeywords() { dropdownSelector.init('#keyword-input-field', { inputTagMode: true, - selectKeys: [13], onChange: function() { $.ajax({ url: $('#keyword-input-field').data('update-url'), diff --git a/app/assets/javascripts/sitewide/dropdown_selector.js b/app/assets/javascripts/sitewide/dropdown_selector.js index fcaea5c1d..3a3a9344a 100644 --- a/app/assets/javascripts/sitewide/dropdown_selector.js +++ b/app/assets/javascripts/sitewide/dropdown_selector.js @@ -35,7 +35,7 @@ onUnSelect: function(), // Run action after unselect customDropdownIcon: function(), // Add custom dropdown icon inputTagMode: boolean, // Use as simple input tag field - selectKeys: array, // array of keys id which use for fast select + selectKeys: array, // array of keys id which use for fast select // default - [13] noEmptyOption: boolean, // use defaut select (only for single option select). default 'false' singleSelect: boolean, // disable multiple select. default 'false' selectAppearance: string, // 'tag' or 'simple'. Default 'tag' @@ -209,6 +209,29 @@ var dropdownSelector = (function() { updateTags(selector, container, { select: true }); } + // intialization keyboard control + function initKeyboardControl(container) { + container.find('.search-field').keydown(function(e) { + var dropdownContainer = container.find('.dropdown-container'); + var pressedKey = e.keyCode; + var selectedOption = dropdownContainer.find('.highlight'); + + if (selectedOption.length === 0 && (pressedKey === 38 || pressedKey === 40)) { + dropdownContainer.find('.dropdown-option').first().addClass('highlight'); + } + + if (pressedKey === 38) { + if (selectedOption.prev('.dropdown-option').length) { + selectedOption.removeClass('highlight').prev('.dropdown-option').addClass('highlight'); + } + } else if (pressedKey === 40) { + if (selectedOption.next('.dropdown-option').length) { + selectedOption.removeClass('highlight').next('.dropdown-option').addClass('highlight'); + } + } + }); + } + // ////////////////////// // Private functions /// // ///////////////////// @@ -265,13 +288,22 @@ var dropdownSelector = (function() { // When we start typing it will dynamically update data dropdownContainer.find('.search-field') .keyup((e) => { + if (e.keyCode === 38 + || e.keyCode === 40 + || (config.selectKeys || []).includes(e.keyCode)) { + return; + } e.stopPropagation(); loadData(selectElement, dropdownContainer); }) .keypress((e) => { - if ((config.selectKeys || []).includes(e.keyCode)) { + if ((config.selectKeys || [13]).includes(e.keyCode)) { if (config.inputTagMode) { addNewTag(selectElement, dropdownContainer); + } else if (dropdownContainer.find('.highlight').length) { + dropdownContainer.find('.highlight').click(); + } else { + dropdownContainer.find('.dropdown-option').first().click(); } } }).click((e) =>{ @@ -332,6 +364,7 @@ var dropdownSelector = (function() { // When user will click away, we must close dropdown $(window).click(() => { if (dropdownContainer.hasClass('open') && config.onClose) { + dropdownContainer.find('.search-field').val(''); config.onClose(); } dropdownContainer.removeClass('open active'); @@ -362,6 +395,9 @@ var dropdownSelector = (function() { dropdownContainer.addClass('simple-mode'); } + // initialization keyboard controll + initKeyboardControl(dropdownContainer); + // In some case dropdown position not correclty calculated updateDropdownDirection(selectElement, dropdownContainer); } diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss index 4bae01cc5..0f6dcde58 100644 --- a/app/assets/stylesheets/shared/dropdown_selector.scss +++ b/app/assets/stylesheets/shared/dropdown_selector.scss @@ -166,6 +166,7 @@ background: $color-concrete; } + &.highlight, &:hover { background: $brand-primary-light; }