Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-24 22:05:56 -05:00
Code Issues Activity

fix(console): remove hover state from tip button after tip is closed (#5197)

Browse source
This commit is contained in:
Xiao Yijun 2024-01-08 11:30:39 +08:00 • committed by GitHub
parent 094ff37e7a
commit 9901f58df3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/ds-components/CopyToClipboard/index.tsx
View file

@ -70,6 +70,10 @@ function CopyToClipboard(
}, []);
const copy: MouseEventHandler<HTMLButtonElement> = async () => {
/**
* Note: should blur the copy icon button before the tooltip is shown, or it will remain focused after the tooltip is closed.
*/
copyIconReference.current?.blur();
setCopyState('copying');
await navigator.clipboard.writeText(value);
setCopyState('copied');

17
packages/console/src/ds-components/Tip/ToggleTip/index.tsx
View file

@ -41,6 +41,15 @@ function ToggleTip({
const [isOpen, setIsOpen] = useState(false);
const openTip = useCallback(() => {
setIsOpen(true);
/**
* Note: should focus on the anchor wrapper element after the tip bubble is opened,
* or the hover state will not be removed from its child element, and this will cause the child element to have a hover state after the tip bubble is closed.
*/
anchorRef.current?.focus();
}, []);
const onClose = useCallback(() => {
setIsOpen(false);
}, [setIsOpen]);
@ -67,12 +76,8 @@ function ToggleTip({
role="tab"
tabIndex={0}
className={anchorClassName}
onClick={() => {
setIsOpen(true);
}}
onKeyDown={onKeyDownHandler(() => {
setIsOpen(true);
})}
onClick={openTip}
onKeyDown={onKeyDownHandler(openTip)}
>
{children}
</div>