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
|
// Keyboard shortcuts
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
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
|
if (e.ctrlKey || e.metaKey) return
|
||||||
|
|
||||||
switch (e.key) {
|
switch (e.key) {
|
||||||
|
|||||||
@@ -192,6 +192,7 @@ export default function FloatingChat() {
|
|||||||
<Slide direction="up" in={isOpen} unmountOnExit>
|
<Slide direction="up" in={isOpen} unmountOnExit>
|
||||||
<Paper
|
<Paper
|
||||||
elevation={8}
|
elevation={8}
|
||||||
|
data-floating-chat="true"
|
||||||
sx={{
|
sx={{
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
|
|||||||
Reference in New Issue
Block a user