BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve keyboard focus handling between inputs for mobile view

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2025-12-28 13:43:53 +02:00
parent ef61c3ec6d
commit 0d27c0b6d5
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+1 -1
View File
@@ -996,7 +996,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
return ( return (
<form onSubmit={handleSubmit} className="pt-0 pb-4 bottom-safe-area"> <form onSubmit={handleSubmit} className="pt-0 pb-2 md:pb-4 bottom-safe-area">
<StatusRow <StatusRow
isWorking={working.isWorking} isWorking={working.isWorking}
statusText={workingStatusText} statusText={workingStatusText}
packages/ui/src/components/layout/MainLayout.tsx
+7
View File
@@ -187,6 +187,13 @@ export const MainLayout: React.FC = () => {
const tagName = target.tagName; const tagName = target.tagName;
const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT'; const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT';
if (isInput || target.isContentEditable) { if (isInput || target.isContentEditable) {
// Check if focus is moving to another input - if so, don't close keyboard
const related = event.relatedTarget as HTMLElement | null;
const relatedTag = related?.tagName;
const relatedIsInput = relatedTag === 'INPUT' || relatedTag === 'TEXTAREA' || relatedTag === 'SELECT' || related?.isContentEditable;
if (relatedIsInput) {
return;
}
forceKeyboardClosed(); forceKeyboardClosed();
} }
}; };
packages/ui/src/index.css
+2 -2
View File
@@ -1146,7 +1146,7 @@ html:not(.dark) .chat-scroll {
--oc-safe-area-top: env(safe-area-inset-top, 0); --oc-safe-area-top: env(safe-area-inset-top, 0);
--oc-safe-area-right: env(safe-area-inset-right, 0); --oc-safe-area-right: env(safe-area-inset-right, 0);
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0); --oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
--oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px); --oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
--oc-safe-area-left: env(safe-area-inset-left, 0); --oc-safe-area-left: env(safe-area-inset-left, 0);
} }
@@ -1236,7 +1236,7 @@ html:not(.dark) .chat-scroll {
--oc-safe-area-top: env(safe-area-inset-top, 0); --oc-safe-area-top: env(safe-area-inset-top, 0);
--oc-safe-area-right: env(safe-area-inset-right, 0); --oc-safe-area-right: env(safe-area-inset-right, 0);
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0); --oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
--oc-safe-area-bottom-visual: clamp(2px, calc(var(--oc-safe-area-bottom) * 0.1 + 2px), 10px); --oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
--oc-safe-area-left: env(safe-area-inset-left, 0); --oc-safe-area-left: env(safe-area-inset-left, 0);
} }