[BUGFIX] TCA Suggest Wizard usable with keyboard 26/47926/4
authorDaniel Siepmann <daniel.siepmann@typo3.org>
Tue, 26 Apr 2016 19:01:44 +0000 (21:01 +0200)
committerMorton Jonuschat <m.jonuschat@mojocode.de>
Wed, 27 Apr 2016 18:22:22 +0000 (20:22 +0200)
As styling was already there, but just for mouse, and same is true for
selecting results. The keyboard events now trigger the same behaviour.

Change-Id: Ie265f3b5785efc89f7148b8303d9b62c3a5add88
Resolves: #70463
Releases: master, 7.6
Reviewed-on: https://review.typo3.org/47926
Reviewed-by: Daniel Siepmann <daniel.siepmann@typo3.org>
Tested-by: Daniel Siepmann <daniel.siepmann@typo3.org>
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Build/Resources/Public/Less/Component/autocomplete.less
typo3/sysext/backend/Resources/Public/JavaScript/FormEngineSuggest.js
typo3/sysext/install/Resources/Public/Css/InstallTool.css
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index 8b2d974..dae3e88 100644 (file)
@@ -43,6 +43,7 @@
        padding: 5px 13px 5px 28px;
        display: block;
        text-decoration: none;
+       .autocomplete-selected &,
        &:hover {
                background-color: @autocomplete-suggestion-link-hover-bg;
                text-decoration: none;
@@ -50,4 +51,4 @@
 }
 .autocomplete-info {
        padding: 5px 15px;
-}
\ No newline at end of file
+}
index 9858274..0274929 100644 (file)
@@ -31,6 +31,21 @@ define(['jquery', 'jquery/autocomplete'], function ($) {
                                'uid': uid,
                                'pid': pid,
                                'newRecordRow': newRecordRow
+                       },
+                       insertValue = function(element) {
+                               var insertData = '';
+                               if ($searchField.data('fieldtype') === 'select') {
+                                       insertData = $(element).data('uid');
+                               } else {
+                                       insertData = $(element).data('table') + '_' + $(element).data('uid');
+                               }
+
+                               var formEl = $searchField.data('fieldname');
+                               var labelEl = $('<div>').text($(element).data('label'));
+                               var label = labelEl.text();
+                               var title = labelEl.find('span').attr('title') || label;
+                               setFormValueFromBrowseWin(formEl, insertData, label, title);
+                               TBE_EDITOR.fieldChanged(table, uid, field, formEl);
                        };
 
                $searchField.autocomplete({
@@ -78,25 +93,16 @@ define(['jquery', 'jquery/autocomplete'], function ($) {
                        },
                        onHide: function() {
                                $containerElement.removeClass('open');
+                       },
+                       onSelect: function() {
+                               insertValue($containerElement.find('.autocomplete-selected a')[0]);
                        }
                });
 
                // set up the events
                $containerElement.on('click', '.autocomplete-suggestion-link', function(evt) {
                        evt.preventDefault();
-                       var insertData = '';
-                       if ($searchField.data('fieldtype') == 'select') {
-                               insertData = $(this).data('uid');
-                       } else {
-                               insertData = $(this).data('table') + '_' + $(this).data('uid');
-                       }
-
-                       var formEl = $searchField.data('fieldname');
-                       var labelEl = $('<div>').html($(this).data('label'));
-                       var label = labelEl.text();
-                       var title = labelEl.find('span').attr('title') || label;
-                       setFormValueFromBrowseWin(formEl, insertData, label, title);
-                       TBE_EDITOR.fieldChanged(table, uid, field, formEl);
+                       insertValue(this);
                });
        };
 
index 6931782..0271556 100644 (file)
@@ -7481,6 +7481,7 @@ button.close {
   display: block;
   text-decoration: none;
 }
+.autocomplete-selected .autocomplete-suggestion-link,
 .autocomplete-suggestion-link:hover {
   background-color: #fafafa;
   text-decoration: none;
index 42faa5b..4bf9f7e 100644 (file)
@@ -7490,6 +7490,7 @@ button.close {
   display: block;
   text-decoration: none;
 }
+.autocomplete-selected .autocomplete-suggestion-link,
 .autocomplete-suggestion-link:hover {
   background-color: #fafafa;
   text-decoration: none;