Fix: don't toggle mailbox subfolders on Arrow keys while typing
The sidebar registers a global window keydown listener that expands/collapses the selected mailbox's subfolders on ArrowLeft/ArrowRight. It didn't check where focus was, so pressing Left/Right while typing in a new email (the contentEditable composer, the subject field, search, etc.) toggled the inbox's subfolders open/closed. Bail out of the handler when the event target is an editable element (INPUT/TEXTAREA/SELECT/contentEditable). Folder-tree arrow navigation still works when focus isn't in an input.
This commit is contained in:
@@ -853,6 +853,20 @@ export function Sidebar({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
|
// Don't hijack Arrow keys while the user is typing. This is a global
|
||||||
|
// window listener, so without this guard typing in a new email (the
|
||||||
|
// contentEditable composer, the subject field, search, etc.) toggled the
|
||||||
|
// selected mailbox's subfolders open/closed on ArrowLeft/ArrowRight.
|
||||||
|
const target = e.target as HTMLElement | null;
|
||||||
|
if (
|
||||||
|
target &&
|
||||||
|
(target.tagName === 'INPUT' ||
|
||||||
|
target.tagName === 'TEXTAREA' ||
|
||||||
|
target.tagName === 'SELECT' ||
|
||||||
|
target.isContentEditable)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (!selectedMailbox || isCollapsed) return;
|
if (!selectedMailbox || isCollapsed) return;
|
||||||
|
|
||||||
const findNode = (nodes: MailboxNode[]): MailboxNode | null => {
|
const findNode = (nodes: MailboxNode[]): MailboxNode | null => {
|
||||||
|
|||||||
Reference in New Issue
Block a user