diff --git a/cvat-ui/src/audio/components/annotation-page/audio-workspace/audio-region-details.tsx b/cvat-ui/src/audio/components/annotation-page/audio-workspace/audio-region-details.tsx index 502c2d08a3b1..39ec4b3e1a01 100644 --- a/cvat-ui/src/audio/components/annotation-page/audio-workspace/audio-region-details.tsx +++ b/cvat-ui/src/audio/components/annotation-page/audio-workspace/audio-region-details.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: MIT import React, { - useCallback, useEffect, useState, + useCallback, useEffect, useRef, useState, } from 'react'; import Select from 'antd/lib/select'; import Collapse from 'antd/lib/collapse'; @@ -12,28 +12,39 @@ import Checkbox from 'antd/lib/checkbox'; import InputNumber from 'antd/lib/input-number'; import TextArea from 'antd/lib/input/TextArea'; import Popover from 'antd/lib/popover'; +import Tooltip from 'antd/lib/tooltip'; import { EditOutlined } from '@ant-design/icons'; import { AudioIntervalState, Label, Attribute } from 'cvat-core-wrapper'; +import { ActiveControl } from 'reducers'; import { clamp } from 'utils/math'; import { formatTimeShort, formatMilliseconds } from 'audio/utils/format-audio-time'; +import { type TextareaFocusBookmark, useTextareaFocusBookmark } from 'audio/hooks/use-textarea-focus-bookmark'; interface AudioRegionDetailsProps { interval: AudioIntervalState; intervalIndex: number; labels: Label[]; + activeControl: ActiveControl; trackDurationSeconds: number; onChangeLabel(labelId: number): void; onChangeAttribute(attrID: number, value: string): void; } +function canRestoreOutsideOverlay(event: KeyboardEvent): boolean { + return !(event.target instanceof Element && event.target.closest( + '.ant-modal, .ant-popover, .ant-dropdown, .ant-select-dropdown', + )); +} + function TextAttributeInput({ - attributeID, value, disabled, onChange, + attributeID, value, disabled, onChange, textareaFocusBookmark, }: { attributeID: number; value: string; disabled: boolean; onChange(attrID: number, value: string): void; + textareaFocusBookmark: TextareaFocusBookmark | null; }): JSX.Element { // Using local value prevents the value to be replaced in the text area on every keystroke // It helps keeping the caret position as well as working system shortcuts like undo/redo @@ -54,26 +65,44 @@ function TextAttributeInput({ } }, [localValue]); + const hasFocusBookmark = textareaFocusBookmark?.element.getAttribute('data-cvat-attribute-id') === String(attributeID); + return ( -