diff --git a/src/app/views/main-header/FeedbackButton.tsx b/src/app/views/main-header/FeedbackButton.tsx
index b83db73a2..7ec28749a 100644
--- 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 =
{translateMessage('Feedback')}
+ const feedbackButtonRef = React.useRef(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}
/>
diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
index 2719f9500..234260d57 100644
--- 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 = (props: Mai
feedbackIconAdjustmentStyles, tenantIconStyles, moreInformationStyles,
tenantLabelStyle, tenantContainerStyle } = mainHeaderStyles(currentTheme, mobileScreen);
+
return (