Fix: Return focus to feedback button (#1941)

microsoftgraph · Jul 19, 2022 · 51b9380 · 51b9380
1 parent bda63a7
commit 51b9380
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/app/views/main-header/FeedbackButton.tsx b/src/app/views/main-header/FeedbackButton.tsx
@@ -1,5 +1,5 @@
-import { getTheme, IconButton, IIconProps, TooltipHost } from '@fluentui/react';
-import React, { useState } from 'react';
+import { getTheme, IButton, IconButton, IIconProps, TooltipHost } from '@fluentui/react';
+import React, { useState, useEffect } from 'react';
 import { translateMessage } from '../../utils/translate-messages';
 import { useSelector } from 'react-redux';
 import FeedbackForm from '../query-runner/request/feedback/FeedbackForm';
@@ -17,6 +17,18 @@ export const FeedbackButton = () => {
   const feedbackTitle = translateMessage('Feedback');
   const content = <div style={{padding:'3px'}}>{translateMessage('Feedback')}</div>
 
+  const feedbackButtonRef = React.useRef<IButton>(null)
+  const isFirstRender = React.useRef(true);
+  useEffect( () => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if(!enableSurvey){
+      feedbackButtonRef.current?.focus();
+    }
+  },[enableSurvey])
+
   const feedbackIconStyles = {
     root:{
       height: '50px',
@@ -66,6 +78,7 @@ export const FeedbackButton = () => {
             styles={feedbackIconStyles}
             role={'button'}
             disabled={enableSurvey}
+            componentRef={feedbackButtonRef}
           />
         </TooltipHost>
 

diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
@@ -49,6 +49,7 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
     feedbackIconAdjustmentStyles, tenantIconStyles, moreInformationStyles,
     tenantLabelStyle, tenantContainerStyle } = mainHeaderStyles(currentTheme, mobileScreen);
 
+
   return (
     <Stack tokens={sectionStackTokens}>
       <Stack