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