diff --git a/src/components/modals/ListSearchModal.tsx b/src/components/modals/ListSearchModal.tsx index 7a9bdfd..c127b45 100644 --- a/src/components/modals/ListSearchModal.tsx +++ b/src/components/modals/ListSearchModal.tsx @@ -9,7 +9,7 @@ import { SingleDropdownOption, TextField } from "decky-frontend-lib"; -import { VFC, useEffect, useState } from "react"; +import { VFC, useEffect, useMemo, useState } from "react"; import { IconType } from "react-icons/lib"; import { FixedSizeList as List } from "react-window"; import AutoSizer from "react-virtualized-auto-sizer"; @@ -42,21 +42,20 @@ export const ListSearchModal: VFC = ({ rgOptions: list, en }, [query]); function onItemsRendered({ visibleStartIndex, visibleStopIndex }: { visibleStartIndex: number, visibleStopIndex: number }) { - // ! these cause focus issues, doesn't seem worth it to have them. - // if (!renderTopArrow && visibleStartIndex !== 0) { - // setRenderTopArrow(true); - // } else if (renderTopArrow && visibleStartIndex === 0) { - // setRenderTopArrow(false); - // } + if (!renderTopArrow && visibleStartIndex !== 0) { + setRenderTopArrow(true); + } else if (renderTopArrow && visibleStartIndex === 0) { + setRenderTopArrow(false); + } - // if (!renderBottomArrow && visibleStopIndex !== list.length - 1) { - // setRenderBottomArrow(true); - // } else if (renderBottomArrow && visibleStopIndex === list.length - 1) { - // setRenderBottomArrow(false); - // } + if (!renderBottomArrow && visibleStopIndex !== filteredList.length - 1) { + setRenderBottomArrow(true); + } else if (renderBottomArrow && visibleStopIndex === filteredList.length - 1) { + setRenderBottomArrow(false); + } } - const ListEntry = ({ index, style }: { index: number, style: any}) => { + const ListEntry = useMemo<(props: { index: number, style: any}) => JSX.Element >(() => ({ index, style }) => { const EntryIcon = determineEntryIcon(filteredList[index]); return (
@@ -75,7 +74,7 @@ export const ListSearchModal: VFC = ({ rgOptions: list, en
); - }; + }, [filteredList]); return (
@@ -111,9 +110,9 @@ export const ListSearchModal: VFC = ({ rgOptions: list, en
- {/*
+
{renderTopArrow && } -
*/} +
= ({ rgOptions: list, en - {/*
+
{renderBottomArrow && } -
*/} +