Fix keyboard search when left pane is narrow

This PR fixes Cmd+f/Ctrl+f functionality in the left pane.
Using a keyboard to search across all
conversations should now automatically change the left pane width
to accommodate the search input component.

Resolves: #6281
This commit is contained in:
veekas ashoka 2023-02-22 14:21:59 -05:00
parent 3d735acdec
commit 0100866d0a
7 changed files with 99 additions and 23 deletions

View file

@ -104,7 +104,7 @@ const defaultModeSpecificProps = {
pinnedConversations,
conversations: defaultConversations,
archivedConversations: defaultArchivedConversations,
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
};
const emptySearchResultsGroup = { isLoading: false, results: [] };
@ -278,7 +278,7 @@ export function InboxNoConversations(): JSX.Element {
pinnedConversations: [],
conversations: [],
archivedConversations: [],
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
},
})}
/>
@ -299,7 +299,7 @@ export function InboxOnlyPinnedConversations(): JSX.Element {
pinnedConversations,
conversations: [],
archivedConversations: [],
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
},
})}
/>
@ -320,7 +320,7 @@ export function InboxOnlyNonPinnedConversations(): JSX.Element {
pinnedConversations: [],
conversations: defaultConversations,
archivedConversations: [],
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
},
})}
/>
@ -341,7 +341,7 @@ export function InboxOnlyArchivedConversations(): JSX.Element {
pinnedConversations: [],
conversations: [],
archivedConversations: defaultArchivedConversations,
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
},
})}
/>
@ -362,7 +362,7 @@ export function InboxPinnedAndArchivedConversations(): JSX.Element {
pinnedConversations,
conversations: [],
archivedConversations: defaultArchivedConversations,
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
},
})}
/>
@ -383,7 +383,7 @@ export function InboxNonPinnedAndArchivedConversations(): JSX.Element {
pinnedConversations: [],
conversations: defaultConversations,
archivedConversations: defaultArchivedConversations,
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
},
})}
/>
@ -404,7 +404,7 @@ export function InboxPinnedAndNonPinnedConversations(): JSX.Element {
pinnedConversations,
conversations: defaultConversations,
archivedConversations: [],
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
},
})}
/>
@ -946,7 +946,7 @@ export function CaptchaDialogRequired(): JSX.Element {
pinnedConversations,
conversations: defaultConversations,
archivedConversations: [],
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
searchTerm: '',
},
challengeStatus: 'required',
@ -969,7 +969,7 @@ export function CaptchaDialogPending(): JSX.Element {
pinnedConversations,
conversations: defaultConversations,
archivedConversations: [],
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
searchTerm: '',
},
challengeStatus: 'pending',
@ -991,7 +991,7 @@ export const _CrashReportDialog = (): JSX.Element => (
pinnedConversations,
conversations: defaultConversations,
archivedConversations: [],
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
searchTerm: '',
},
crashReportCount: 42,
@ -1163,7 +1163,7 @@ export function SearchingConversation(): JSX.Element {
pinnedConversations: [],
conversations: defaultConversations,
archivedConversations: [],
isAboutToSearchInAConversation: false,
isAboutToSearch: false,
searchConversation: getDefaultConversation(),
searchTerm: '',
},

View file

@ -24,7 +24,7 @@ export type LeftPaneInboxPropsType = {
conversations: ReadonlyArray<ConversationListItemPropsType>;
archivedConversations: ReadonlyArray<ConversationListItemPropsType>;
pinnedConversations: ReadonlyArray<ConversationListItemPropsType>;
isAboutToSearchInAConversation: boolean;
isAboutToSearch: boolean;
startSearchCounter: number;
searchDisabled: boolean;
searchTerm: string;
@ -38,7 +38,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
private readonly pinnedConversations: ReadonlyArray<ConversationListItemPropsType>;
private readonly isAboutToSearchInAConversation: boolean;
private readonly isAboutToSearch: boolean;
private readonly startSearchCounter: number;
@ -52,7 +52,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
conversations,
archivedConversations,
pinnedConversations,
isAboutToSearchInAConversation,
isAboutToSearch,
startSearchCounter,
searchDisabled,
searchTerm,
@ -63,7 +63,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
this.conversations = conversations;
this.archivedConversations = archivedConversations;
this.pinnedConversations = pinnedConversations;
this.isAboutToSearchInAConversation = isAboutToSearchInAConversation;
this.isAboutToSearch = isAboutToSearch;
this.startSearchCounter = startSearchCounter;
this.searchDisabled = searchDisabled;
this.searchTerm = searchTerm;
@ -245,7 +245,7 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
!this.conversations.length &&
!this.pinnedConversations.length &&
!this.archivedConversations.length;
return hasNoConversations || this.isAboutToSearchInAConversation;
return hasNoConversations || this.isAboutToSearch;
}
shouldRecomputeRowHeights(old: Readonly<LeftPaneInboxPropsType>): boolean {