JENKINS-47022 - Fix for dropdown losing focus on selection, back port to 1.4

jenkins-design-language/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jenkins-cd/design-language",
   "jdlName": "jenkins-design-language",
-  "version": "0.0.158",
+  "version": "0.0.160",
   "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

@@ -265,6 +265,11 @@ export class Dropdown extends React.Component {
         if (this.props.onChange) {
             this.props.onChange(option, index);
         }
+
+        //restore the focus on the button element
+        if (this.buttonRef && this.buttonRef.focus) {
+            this.buttonRef.focus();
+        }
     }
 
     _optionToLabel(option) {

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

@@ -56,4 +56,20 @@ 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 still have focus after option selection', () => {
+        const wrapper = mount(<Dropdown { ...{
+            options,
+        }}
+        />);
+        assert.ok(wrapper);
+        const drop = wrapper.find('Dropdown');
+        // click the dropDown button
+        drop.find('button').simulate('click');
+        // click on the 1st option
+        drop.find("li a").first().simulate('click');
+        //get focused element
+        const focusedElement = document.activeElement;
+        //verify that the focused element is the dropdown button
+        assert.equal(focusedElement, drop.find('button').get(0));
+    });
 });