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) {
|
||||
|
||||
@@ -192,6 +192,7 @@ export default function FloatingChat() {
|
||||
<Slide direction="up" in={isOpen} unmountOnExit>
|
||||
<Paper
|
||||
elevation={8}
|
||||
data-floating-chat="true"
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
|
||||
Reference in New Issue
Block a user