[JENKINS-51921] Prevent onClick of generated syntetic events in dropDown (#1752)

* [JENKINS-51921] Prevent synthetic events to trigger onClick.

* [JENKINS-51921] do the relase dance

jenkins-design-language/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jenkins-cd/design-language",
   "jdlName": "jenkins-design-language",
-  "version": "0.0.162",
+  "version": "0.0.163",
   "description": "Styles, assets, and React classes for Jenkins Design Language",
   "main": "dist/js/components/index.js",
   "scripts": {

jenkins-design-language/src/js/components/forms/Dropdown.jsx

@@ -88,7 +88,17 @@ export class Dropdown extends React.Component {
         // console.log('_onDropdownMouseEvent');
         // prevent navigation if anchor was clicked
         event.preventDefault();
-        this._toggleDropdownMenu();
+        /*
+         * Some browser will fire a click event when you set focus on this element while in an another
+         * event loop if those browser fire this event it will be from 0 0 hence not a real click.
+         *
+         * Another workaround could have been to create a timeout and set the focus after a certain time,
+         * however that has the problem that the timeout can vary, leaving the whole component in a focus limbo
+         */
+        const { clientX, clientY } = event;
+        if( clientY !== 0 && clientX !== 0) {
+            this._toggleDropdownMenu();
+        }
     };
 
     _handleKeyEvent = event => {
@@ -137,6 +147,20 @@ export class Dropdown extends React.Component {
         }
     };
 
+    _keyEvent = event => {
+        const { keyCode } = event;
+
+        switch (keyCode) {
+            case KeyCodes.SPACEBAR:
+            case KeyCodes.ENTER:
+                event.preventDefault();
+                this._toggleDropdownMenu();
+                break;
+            default:
+                break;
+        }
+    };
+
     _handleMouseEvent = event => {
         // console.log("_handleMouseEvent");
         const { clientX, clientY } = event;
@@ -306,6 +330,7 @@ export class Dropdown extends React.Component {
                     disabled={buttonDisabled}
                     title={buttonTitle}
                     onClick={this._onDropdownMouseEvent}
+                    onKeyDown={ this._keyEvent }
                 >
                     {buttonLabel}
                 </button>

jenkins-design-language/test/js/components/Dropdown-spec.jsx

@@ -56,6 +56,22 @@ describe("Dropdown", () => {
         assert.equal(drop.find('ul.Dropdown-menu li').length, options.length); // dropdown options same length then our array?
         assert.equal(drop.find('#unit').length, 1); // only on footer?
     });
+    it('dropDown should show footer on space key', () => {
+        const wrapper = mount(<Dropdown { ...{
+            options,
+            footer: <div id="unit">This is a custom footer</div>,
+        }}
+        />);
+        assert.ok(wrapper);
+        const drop = wrapper.find('Dropdown');
+        const props = drop.find('button').props();
+        assert.equal(props.title, 'Select an option');
+        // click on dropDown button
+        drop.find('button').simulate('keyDown', { keyCode: 32 }); // trigger keydown event
+        assert.equal(drop.find('ul.Dropdown-menu').length, 1);
+        assert.equal(drop.find('ul.Dropdown-menu li').length, options.length); // dropdown options same length then our array?
+        assert.equal(drop.find('#unit').length, 1); // only on footer?
+    });
     it('dropDown should still have focus after option selection', () => {
         const wrapper = mount(<Dropdown { ...{
             options,