Some more attempts

package.json

@@ -12,14 +12,17 @@
   "dependencies": {
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
+    "@tailwindcss/forms": "^0.5.6",
     "@tanstack/react-query": "^4.35.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-select": "^5.7.5"
+    "react-select": "^5.7.5",
+    "react-window": "^1.8.9"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
+    "@types/react-window": "^1.8.6",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "@vitejs/plugin-react-swc": "^3.0.0",

src/ComboBox2.tsx

@@ -0,0 +1,26 @@
+import {useQuery} from "@tanstack/react-query";
+import Select, {createFilter} from "react-select";
+
+export default function Example() {
+    const {data: options, isLoading} = useQuery({
+        queryKey: ['obsidian-metadata'],
+        initialData: [],
+        queryFn: async () => {
+            const response = await fetch("http://100.115.154.44:9002/metadata")
+            const fullData: any[] = await response.json();
+
+            return fullData.map(md => ({
+                value: md.relativePath as string,
+                label: md.fileName as string
+            }));
+        },
+    });
+
+    return <Select
+        options={options}
+        isLoading={isLoading}
+        isSearchable={true}
+        isClearable={true}
+        filterOption={createFilter({ ignoreAccents: false })}
+    />;
+}

src/TA.tsx

@@ -0,0 +1,103 @@
+import {ReactNode} from "react";
+import AsyncSelect from "react-select/async";
+import {FixedSizeList as List} from "react-window";
+import Select, {createFilter, MenuListProps} from "react-select";
+
+import {useQuery} from "@tanstack/react-query";
+
+const height = 35;
+
+function MenuList(props: MenuListProps) {
+    const {
+        options,
+        children,
+        maxHeight,
+        getValue
+    } = props as Omit<MenuListProps, 'children'> & {
+        children: ReactNode[]
+    };
+
+    const [value] = getValue();
+    const initialOffset = options.indexOf(value) * height;
+
+    return (<List
+        width={'100%'}
+        height={maxHeight}
+        itemCount={children.length}
+        itemSize={height}
+        initialScrollOffset={initialOffset}
+    >
+        {({
+              index,
+              style
+          }) => <div style={style}>{children[index]}</div>}
+    </List>);
+}
+
+const TestSelect = (vendorOptions: any) => {
+    const options: {
+        value: string,
+        label: string
+    }[] = [];
+    for (let i = 0; i < vendorOptions["vendorOptions"].length; i = i + 1) {
+        options.push({
+            value: vendorOptions["vendorOptions"][i],
+            label: `${vendorOptions["vendorOptions"][i]}`
+        });
+    }
+
+    const loadOptions = (_inputValue: unknown, callback: (options: {
+        value: string,
+        label: string
+    }[]) => void) => {
+        setTimeout(() => {
+            callback(options);
+        }, 1000);
+    };
+
+    const TestSelectComponent = () => {
+        return (
+            <div className="testDropdown">
+                <AsyncSelect components={{MenuList}} cacheOptions defaultOptions loadOptions={loadOptions}
+                             filterOption={createFilter({ignoreAccents: false})}/>
+            </div>
+        )
+    }
+
+    return (
+        <TestSelectComponent/>
+    )
+}
+
+export function LargeSelect() {
+    const {
+        data: options,
+        isLoading,
+    } = useQuery({
+        queryKey: ['obsidian-metadata'],
+        initialData: [],
+        queryFn: async () => {
+            const response = await fetch("http://100.115.154.44:9002/metadata")
+            const fullData: any[] = await response.json();
+
+            return fullData.map(md => ({
+                value: md.relativePath as string,
+                label: md.fileName as string
+            }));
+        },
+    });
+
+    return (
+        <div className={"m-5"}>
+            <Select
+                components={{MenuList}}
+                isLoading={isLoading}
+                options={options}
+                filterOption={createFilter({ignoreAccents: false})}
+            />
+        </div>
+    )
+}
+
+
+export default TestSelect

src/main.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
-import Combobox from "./ComboBox.tsx";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+import {LargeSelect} from "./TA.tsx";
 
 const queryClient = new QueryClient()
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
         <QueryClientProvider client={queryClient}>
-            <Combobox/>
+            <LargeSelect/>
         </QueryClientProvider>
     </React.StrictMode>,
 )

tailwind.config.js

@@ -7,6 +7,8 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms')
+  ],
 }
 

vite.config.ts

@@ -1,7 +1,10 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+    plugins: [react()],
+    server: {
+        host: '0.0.0.0'
+    }
 })