From 319d354e5f36020bce402d544b36fc037edeb900 Mon Sep 17 00:00:00 2001 From: Elinor Date: Wed, 26 Jan 2022 19:37:30 +0300 Subject: [PATCH] Fix: Enable focus to remain on copy button when clicked (#1379) * add focus function to copy buttons * remove closing dialog function --- src/app/views/common/copy/CopyButton.tsx | 9 +++++++-- src/app/views/query-response/QueryResponse.tsx | 3 +-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/views/common/copy/CopyButton.tsx b/src/app/views/common/copy/CopyButton.tsx index bdbbab29c..439932916 100644 --- a/src/app/views/common/copy/CopyButton.tsx +++ b/src/app/views/common/copy/CopyButton.tsx @@ -1,4 +1,4 @@ -import { IconButton, IIconProps, PrimaryButton } from '@fluentui/react'; +import { IButton, IconButton, IIconProps, PrimaryButton } from '@fluentui/react'; import React, { useState } from 'react'; import { translateMessage } from '../../../utils/translate-messages'; @@ -18,10 +18,14 @@ export function CopyButton(props:ICopyButtonProps) { const copyLabel: string = !copied ? translateMessage('Copy') : translateMessage('Copied'); + const copyRef = React.createRef(); + const onSetFocus = () => copyRef.current!.focus(); + const handleCopyClick = async () => { props.handleOnClick(props); setCopied(true); handleTimeout(); + onSetFocus(); }; const handleTimeout = () => { @@ -40,9 +44,10 @@ export function CopyButton(props:ICopyButtonProps) { ariaLabel={copyLabel} style={props.style} className={props.className} + componentRef={copyRef} /> : - + } ) diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx index 1890d4ec3..d36e7fb63 100644 --- a/src/app/views/query-response/QueryResponse.tsx +++ b/src/app/views/query-response/QueryResponse.tsx @@ -51,7 +51,7 @@ const QueryResponse = (props: IQueryResponseProps) => { }; const handleCopy = () => { - copy('share-query-text').then(() => toggleShareQueryDialogState()); + copy('share-query-text'); trackCopyEvent(); }; @@ -190,7 +190,6 @@ const QueryResponse = (props: IQueryResponseProps) => { width: '100%', height: 63, overflowY: 'scroll', - border: 'none', resize: 'none', color: 'black' }}