diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index 6a5b4f78a..210b1b2ae 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -35,8 +35,9 @@ export default function PdfArticleContainer( const containerRef = useRef(null) const [notebookKey, setNotebookKey] = useState(uuidv4()) const [noteTarget, setNoteTarget] = useState(undefined) - const [noteTargetPageIndex, setNoteTargetPageIndex] = - useState(undefined) + const [noteTargetPageIndex, setNoteTargetPageIndex] = useState< + number | undefined + >(undefined) const highlightsRef = useRef([]) const annotationOmnivoreId = (annotation: Annotation): string | undefined => { @@ -418,7 +419,30 @@ export default function PdfArticleContainer( } ) - function keyDownHandler(event: globalThis.KeyboardEvent) { + type PossibleInputEventTarget = KeyboardEvent & { + nodeName: string + } + + function isPossibleInputEventTarget( + target: any + ): target is PossibleInputEventTarget { + return ( + 'nodeName' in target && + typeof target.nodeName == 'string' && + target.nodeName + ) + } + + function keyDownHandler(event: KeyboardEvent) { + const inputs = ['input', 'select', 'button', 'textarea'] + + if (event.target && isPossibleInputEventTarget(event.target)) { + const nodeName = event.target.nodeName.toLowerCase() + if (inputs.indexOf(nodeName) != -1) { + return + } + } + const key = event.key.toLowerCase() switch (key) { case 'o': @@ -445,8 +469,6 @@ export default function PdfArticleContainer( const highlight = root?.querySelector( '.PSPDFKit-Text-Markup-Inline-Toolbar-Highlight' ) - console.log('root ', root) - console.log('highlight overlay: ', highlight, highlight?.nodeName) if (highlight && highlight?.nodeName == 'BUTTON') { const button = highlight as HTMLButtonElement button.click()