fix: query creation via shortcut (#15281)

## Description

- Shortcut key-up and key-down were not working because the list of file operations on ui were filtered out of the `sectionTitle` but on key actions it was being referred to which was adding in the offset for the current active item.

Fixes #15264

## Type of change

- Bug fix (non-breaking change which fixes an issue)
This commit is contained in:
Aman Agarwal 2022-07-20 10:06:51 +05:30 committed by GitHub
parent 39ad73228c
commit 10ca5b5033
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -61,6 +61,9 @@ export default function ExplorerSubMenu({
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const [show, setShow] = useState(openMenu); const [show, setShow] = useState(openMenu);
const fileOperations = useFilteredFileOperations(query); const fileOperations = useFilteredFileOperations(query);
const filteredFileOperations = fileOperations.filter(
(item: any) => item.kind !== SEARCH_ITEM_TYPES.sectionTitle,
);
const pageId = useSelector(getCurrentPageId); const pageId = useSelector(getCurrentPageId);
const dispatch = useDispatch(); const dispatch = useDispatch();
const plugins = useSelector((state: AppState) => { const plugins = useSelector((state: AppState) => {
@ -85,34 +88,27 @@ export default function ExplorerSubMenu({
const handleUpKey = useCallback(() => { const handleUpKey = useCallback(() => {
setActiveItemIdx((currentActiveIndex) => { setActiveItemIdx((currentActiveIndex) => {
if (currentActiveIndex <= 0) return fileOperations.length - 1; if (currentActiveIndex <= 0) return filteredFileOperations.length - 1;
const offset = return Math.max(currentActiveIndex - 1, 0);
fileOperations[currentActiveIndex - 1].kind ===
SEARCH_ITEM_TYPES.sectionTitle
? 2
: 1;
return Math.max(currentActiveIndex - offset, 0);
}); });
}, [fileOperations]); }, [filteredFileOperations]);
const handleDownKey = useCallback(() => { const handleDownKey = useCallback(() => {
setActiveItemIdx((currentActiveIndex) => { setActiveItemIdx((currentActiveIndex) => {
if (currentActiveIndex >= fileOperations.length - 1) return 0; if (currentActiveIndex >= filteredFileOperations.length - 1) return 0;
const offset = return Math.min(
fileOperations[currentActiveIndex + 1].kind === currentActiveIndex + 1,
SEARCH_ITEM_TYPES.sectionTitle filteredFileOperations.length - 1,
? 2 );
: 1;
return Math.min(currentActiveIndex + offset, fileOperations.length - 1);
}); });
}, [fileOperations]); }, [filteredFileOperations]);
const onChange = useCallback((e) => { const onChange = useCallback((e) => {
setQuery(e.target.value); setQuery(e.target.value);
}, []); }, []);
const handleSelect = () => { const handleSelect = () => {
const item = fileOperations[activeItemIdx]; const item = filteredFileOperations[activeItemIdx];
handleClick(item); handleClick(item);
}; };
@ -164,11 +160,7 @@ export default function ExplorerSubMenu({
)} )}
</div> </div>
<div className="ops-container"> <div className="ops-container">
{fileOperations {filteredFileOperations.map((item: any, idx: number) => {
.filter(
(item: any) => item.kind !== SEARCH_ITEM_TYPES.sectionTitle,
)
.map((item: any, idx: number) => {
const icon = const icon =
item.icon || item.icon ||
(item.pluginId && ( (item.pluginId && (