SONAR-16703 [891656] Hidden or empty element receives focus

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawer.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawer.tsx
index 56c530395d3751120505202d8665c2e55cb11203..cc45d2574a5da8e09e2f131decda7651a9acc7ab 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawer.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/InfoDrawer.tsx
@@ -39,15 +39,17 @@ export default function InfoDrawer(props: InfoDrawerProps) {
     <div
       className={classNames('info-drawer info-drawer-pane', { open: displayed })}
       style={{ top }}>
-      <div className="close-button">
-        <ClearButton aria-label={translate('close')} onClick={onClose} />
-      </div>
       {displayed && (
-        <EscKeydownHandler onKeydown={onClose}>
-          <OutsideClickHandler onClickOutside={onClose}>
-            <div className="display-flex-column max-height-100">{children}</div>
-          </OutsideClickHandler>
-        </EscKeydownHandler>
+        <>
+          <div className="close-button">
+            <ClearButton aria-label={translate('close')} onClick={onClose} />
+          </div>
+          <EscKeydownHandler onKeydown={onClose}>
+            <OutsideClickHandler onClickOutside={onClose}>
+              <div className="display-flex-column max-height-100">{children}</div>
+            </OutsideClickHandler>
+          </EscKeydownHandler>
+        </>
       )}
     </div>
   );

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/InfoDrawer-test.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/InfoDrawer-test.tsx
index 749010b8c3d2779720d53b8dda9f6d5489099bb4..742ea4fe146ca6a3636f22a0711b212b1394208a 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/InfoDrawer-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/InfoDrawer-test.tsx
@@ -19,6 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { ClearButton } from '../../../../../../components/controls/buttons';
 import InfoDrawer, { InfoDrawerProps } from '../InfoDrawer';
 
 it('should render correctly', () => {
@@ -28,9 +29,8 @@ it('should render correctly', () => {
 
 it('should call onClose when button is clicked', () => {
   const onClose = jest.fn();
-  const wrapper = shallowRender({ onClose });
-
-  wrapper.find('ClearButton').simulate('click');
+  const wrapper = shallowRender({ onClose, displayed: true });
+  wrapper.find(ClearButton).simulate('click');
 
   expect(onClose).toBeCalled();
 });

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawer-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawer-test.tsx.snap
index 4280459e52cce4ebdbd5344cc5cb4eab07520de0..5adc0a375236d9743ebc7fd735a9310bcc8f1be3 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/__tests__/__snapshots__/InfoDrawer-test.tsx.snap
@@ -8,16 +8,7 @@ exports[`should render correctly: default 1`] = `
       "top": 120,
     }
   }
->
-  <div
-    className="close-button"
-  >
-    <ClearButton
-      aria-label="close"
-      onClick={[MockFunction]}
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`should render correctly: displayed 1`] = `