apply feedback for issues page (#1980)

3 files changed, 21 insertions, 10 deletions

diff --git a/server/sonar-web/src/main/js/components/common/EmptySearch.css b/server/sonar-web/src/main/js/components/common/EmptySearch.css
new file mode 100644
index 00000000000..2ad32dd05e7
--- /dev/null
+++ b/server/sonar-web/src/main/js/components/common/EmptySearch.css
@@ -0,0 +1,7 @@
+.empty-search {
+  padding: 60px 0;
+  border: 1px solid #e6e6e6;
+  border-radius: 2px;
+  color: #777;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/server/sonar-web/src/main/js/components/common/EmptySearch.js b/server/sonar-web/src/main/js/components/common/EmptySearch.js
index 904a6b2cbad..719a2239c90 100644
--- a/server/sonar-web/src/main/js/components/common/EmptySearch.js
+++ b/server/sonar-web/src/main/js/components/common/EmptySearch.js
@@ -19,18 +19,11 @@
  */
 // @flow
 import React from 'react';
-import { css } from 'glamor';
 import { translate } from '../../helpers/l10n';
+import './EmptySearch.css';
 
 const EmptySearch = () => (
-  <div
-    className={css({
-      padding: '60px 0',
-      border: '1px solid #e6e6e6',
-      borderRadius: 2,
-      textAlign: 'center',
-      color: '#777'
-    })}>
+  <div className="empty-search">
     <h3>{translate('no_results_search')}</h3>
     <p className="big-spacer-top">{translate('no_results_search.2')}</p>
   </div>
diff --git a/server/sonar-web/src/main/js/components/common/SelectList.js b/server/sonar-web/src/main/js/components/common/SelectList.js
index d5695f82a22..cbfadc9307a 100644
--- a/server/sonar-web/src/main/js/components/common/SelectList.js
+++ b/server/sonar-web/src/main/js/components/common/SelectList.js
@@ -36,6 +36,7 @@ type State = {
 
 export default class SelectList extends React.PureComponent {
   currentKeyScope: string;
+  previousFilter: Function;
   previousKeyScope: string;
   props: Props;
   state: State;
@@ -66,9 +67,18 @@ export default class SelectList extends React.PureComponent {
 
   attachShortcuts = () => {
     this.previousKeyScope = key.getScope();
+    this.previousFilter = key.filter;
     this.currentKeyScope = uniqueId('key-scope');
     key.setScope(this.currentKeyScope);
 
+    // sometimes there is a *focused* search field next to the SelectList component
+    // we need to allow shortcuts in this case, but only for the used keys
+    key.filter = (event: KeyboardEvent & { target: HTMLElement }) => {
+      const tagName = (event.target || event.srcElement).tagName;
+      const isInput = tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA';
+      return [13, 38, 40].includes(event.keyCode) || !isInput;
+    };
+
     key('down', this.currentKeyScope, () => {
       this.setState(this.selectNextElement);
       return false;
@@ -80,7 +90,7 @@ export default class SelectList extends React.PureComponent {
     });
 
     key('return', this.currentKeyScope, () => {
-      if (this.state.active) {
+      if (this.state.active != null) {
         this.handleSelect(this.state.active);
       }
       return false;
@@ -90,6 +100,7 @@ export default class SelectList extends React.PureComponent {
   detachShortcuts = () => {
     key.setScope(this.previousKeyScope);
     key.deleteScope(this.currentKeyScope);
+    key.filter = this.previousFilter;
   };
 
   handleSelect = (item: string) => {