Fix keyboard shortcuts conflict between bible reader and AI chat
- Added data-floating-chat attribute to chat component for easy detection - Updated bible reader keyboard event handler to check if chat is open - Prevent shortcuts from triggering when user is typing in input fields - Check for dialogs, modals, and the floating chat before processing shortcuts
This commit is contained in:
@@ -298,6 +298,23 @@ export default function BibleReaderNew() {
|
||||
// Keyboard shortcuts
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Don't trigger shortcuts if user is typing in an input field
|
||||
const activeElement = document.activeElement as HTMLElement
|
||||
if (activeElement && (
|
||||
activeElement.tagName === 'INPUT' ||
|
||||
activeElement.tagName === 'TEXTAREA' ||
|
||||
activeElement.isContentEditable ||
|
||||
activeElement.closest('[role="dialog"]') // Don't trigger if a dialog/modal is open
|
||||
)) {
|
||||
return
|
||||
}
|
||||
|
||||
// Check if the floating chat is open
|
||||
const floatingChat = document.querySelector('[data-floating-chat="true"]')
|
||||
if (floatingChat) {
|
||||
return
|
||||
}
|
||||
|
||||
if (e.ctrlKey || e.metaKey) return
|
||||
|
||||
switch (e.key) {
|
||||
|
||||
Reference in New Issue
Block a user