SONAR-16489 Security Hotspot assignee field interacts with hotspot selection

5 files changed, 34 insertions, 12 deletions

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelection.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelection.tsx
index 5d08d591408..8aef280c182 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelection.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/AssigneeSelection.tsx
@@ -111,10 +111,12 @@ export default class AssigneeSelection extends React.PureComponent<Props, State>
         break;
       case KeyboardKeys.UpArrow:
         event.preventDefault();
+        event.nativeEvent.stopImmediatePropagation();
         this.highlightPrevious();
         break;
       case KeyboardKeys.DownArrow:
         event.preventDefault();
+        event.nativeEvent.stopImmediatePropagation();
         this.highlightNext();
         break;
     }
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/AssigneeSelection-test.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/AssigneeSelection-test.tsx
index e7dcd4c7238..c659d52582d 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/AssigneeSelection-test.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/assignee/__tests__/AssigneeSelection-test.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { searchUsers } from '../../../../../api/users';
 import { KeyboardKeys } from '../../../../../helpers/keycodes';
 import { mockLoggedInUser, mockUser } from '../../../../../helpers/testMocks';
-import { waitAndUpdate } from '../../../../../helpers/testUtils';
+import { mockEvent, waitAndUpdate } from '../../../../../helpers/testUtils';
 import { UserActive } from '../../../../../types/users';
 import AssigneeSelection from '../AssigneeSelection';
 
@@ -35,7 +35,6 @@ it('should render correctly', () => {
 });
 
 it('should handle keydown', () => {
-  const mockEvent = (key: KeyboardKeys) => ({ preventDefault: jest.fn(), nativeEvent: { key } });
   const suggestedUsers = [
     mockUser({ login: '1' }) as UserActive,
     mockUser({ login: '2' }) as UserActive,
@@ -45,29 +44,29 @@ it('should handle keydown', () => {
   const onSelect = jest.fn();
   const wrapper = shallowRender({ onSelect });
 
-  wrapper.instance().handleKeyDown(mockEvent(KeyboardKeys.UpArrow) as any);
+  wrapper.instance().handleKeyDown(mockKeyboardEvent(KeyboardKeys.UpArrow));
   expect(wrapper.state().highlighted).toEqual({ login: '', name: 'unassigned' });
 
   wrapper.setState({ suggestedUsers });
 
   // press down to highlight the first
-  wrapper.instance().handleKeyDown(mockEvent(KeyboardKeys.DownArrow) as any);
+  wrapper.instance().handleKeyDown(mockKeyboardEvent(KeyboardKeys.DownArrow));
   expect(wrapper.state().highlighted).toBe(suggestedUsers[0]);
 
   // press up to loop around to last
-  wrapper.instance().handleKeyDown(mockEvent(KeyboardKeys.UpArrow) as any);
+  wrapper.instance().handleKeyDown(mockKeyboardEvent(KeyboardKeys.UpArrow));
   expect(wrapper.state().highlighted).toBe(suggestedUsers[2]);
 
   // press down to loop around to first
-  wrapper.instance().handleKeyDown(mockEvent(KeyboardKeys.DownArrow) as any);
+  wrapper.instance().handleKeyDown(mockKeyboardEvent(KeyboardKeys.DownArrow));
   expect(wrapper.state().highlighted).toBe(suggestedUsers[0]);
 
   // press down highlight the next
-  wrapper.instance().handleKeyDown(mockEvent(KeyboardKeys.DownArrow) as any);
+  wrapper.instance().handleKeyDown(mockKeyboardEvent(KeyboardKeys.DownArrow));
   expect(wrapper.state().highlighted).toBe(suggestedUsers[1]);
 
   // press enter to select the highlighted user
-  wrapper.instance().handleKeyDown(mockEvent(KeyboardKeys.Enter) as any);
+  wrapper.instance().handleKeyDown(mockKeyboardEvent(KeyboardKeys.Enter));
   expect(onSelect).toBeCalledWith(suggestedUsers[1]);
 });
 
@@ -115,6 +114,10 @@ it('should allow current user selection', async () => {
   expect(wrapper.state().suggestedUsers[0]).toBe(loggedInUser);
 });
 
+function mockKeyboardEvent(key: KeyboardKeys): React.KeyboardEvent {
+  return mockEvent({ nativeEvent: mockEvent({ key }) });
+}
+
 function shallowRender(props?: Partial<AssigneeSelection['props']>) {
   return shallow<AssigneeSelection>(
     <AssigneeSelection
diff --git a/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltips-test.tsx.snap b/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltips-test.tsx.snap
index c3183f63400..c4f775ce431 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltips-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/activity-graph/__tests__/__snapshots__/GraphsTooltips-test.tsx.snap
@@ -129,6 +129,7 @@ exports[`should render correctly for issues graphs: with events 1`] = `
                 "blur": [Function],
               },
               "preventDefault": [Function],
+              "stopImmediatePropagation": [Function],
               "stopPropagation": [Function],
               "target": Object {
                 "blur": [Function],
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/RadioCard-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/RadioCard-test.tsx.snap
index e58f9d73597..26a5307243d 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/RadioCard-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/RadioCard-test.tsx.snap
@@ -42,6 +42,7 @@ exports[`should be actionable 2`] = `
               "blur": [Function],
             },
             "preventDefault": [Function],
+            "stopImmediatePropagation": [Function],
             "stopPropagation": [Function],
             "target": Object {
               "blur": [Function],
diff --git a/server/sonar-web/src/main/js/helpers/testUtils.ts b/server/sonar-web/src/main/js/helpers/testUtils.ts
index 603c3f32a02..5447d52f898 100644
--- a/server/sonar-web/src/main/js/helpers/testUtils.ts
+++ b/server/sonar-web/src/main/js/helpers/testUtils.ts
@@ -23,10 +23,25 @@ import { KeyboardKeys } from './keycodes';
 
 export function mockEvent(overrides = {}) {
   return {
-    target: { blur() {} },
-    currentTarget: { blur() {} },
-    preventDefault() {},
-    stopPropagation() {},
+    target: {
+      blur() {
+        /* noop */
+      }
+    },
+    currentTarget: {
+      blur() {
+        /* noop */
+      }
+    },
+    preventDefault() {
+      /* noop */
+    },
+    stopPropagation() {
+      /* noop */
+    },
+    stopImmediatePropagation() {
+      /* noop */
+    },
     ...overrides
   } as any;
 }