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 (