[BUGFIX] TCA Suggest Wizard usable with keyboard

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/47932
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>

diff --git a/Build/Resources/Public/Less/Component/autocomplete.less b/Build/Resources/Public/Less/Component/autocomplete.less
index 8b2d974..dae3e88 100644 (file)
--- a/Build/Resources/Public/Less/Component/autocomplete.less
+++ b/Build/Resources/Public/Less/Component/autocomplete.less
@@ -43,6 +43,7 @@
        padding: 5px 13px 5px 28px;
        display: block;
        text-decoration: none;
        padding: 5px 13px 5px 28px;
        display: block;
        text-decoration: none;

+       .autocomplete-selected &,

        &:hover {
                background-color: @autocomplete-suggestion-link-hover-bg;
                text-decoration: none;
        &:hover {
                background-color: @autocomplete-suggestion-link-hover-bg;
                text-decoration: none;


@@ -50,4 +51,4 @@
 }
 .autocomplete-info {
        padding: 5px 15px;
 }
 .autocomplete-info {
        padding: 5px 15px;

-}
\ No newline at end of file
+}

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 2efe80c..7583f5c 100644 (file)
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -7120,6 +7120,7 @@ button.close {
   display: block;
   text-decoration: none;
 }
   display: block;
   text-decoration: none;
 }

+.autocomplete-selected .autocomplete-suggestion-link,

 .autocomplete-suggestion-link:hover {
   background-color: #fafafa;
   text-decoration: none;
 .autocomplete-suggestion-link:hover {
   background-color: #fafafa;
   text-decoration: none;

diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineSuggest.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineSuggest.js
index 9858274..0274929 100644 (file)
--- a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineSuggest.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineSuggest.js
@@ -31,6 +31,21 @@ define(['jquery', 'jquery/autocomplete'], function ($) {
                                'uid': uid,
                                'pid': pid,
                                'newRecordRow': newRecordRow
                                '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({
                        };
 
                $searchField.autocomplete({


@@ -78,25 +93,16 @@ define(['jquery', 'jquery/autocomplete'], function ($) {
                        },
                        onHide: function() {
                                $containerElement.removeClass('open');
                        },
                        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();
                        }
                });
 
                // 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);

                });
        };
 
                });
        };
 

diff --git a/typo3/sysext/install/Resources/Public/Css/install.css b/typo3/sysext/install/Resources/Public/Css/install.css
index fba91e3..d7d2d39 100644 (file)
--- a/typo3/sysext/install/Resources/Public/Css/install.css
+++ b/typo3/sysext/install/Resources/Public/Css/install.css
@@ -7111,6 +7111,7 @@ button.close {
   display: block;
   text-decoration: none;
 }
   display: block;
   text-decoration: none;
 }

+.autocomplete-selected .autocomplete-suggestion-link,

 .autocomplete-suggestion-link:hover {
   background-color: #fafafa;
   text-decoration: none;
 .autocomplete-suggestion-link:hover {
   background-color: #fafafa;
   text-decoration: none;