fix: details

src/components/md-commander/CommanderInput.tsx

@@ -1,4 +1,4 @@
-import { type Component, Show } from "solid-js";
+import {type Component, For, Show} from "solid-js";
 import type { CompletionItem } from "./types";
 
 export interface CommanderInputProps {
@@ -39,16 +39,16 @@ export const CommanderInput: Component<CommanderInputProps> = (props) => {
 
       {/* 自动补全下拉框 */}
       <Show when={props.showCompletions() && props.completions().length > 0}>
-        <div class="absolute z-10 w-full bg-white border border-gray-300 shadow-lg max-h-48 overflow-auto mt-1">
-          {props.completions().map((comp, idx) => (
+        <div class="absolute left-0 top-10 z-10 w-full bg-white border border-gray-300 shadow-lg max-h-48 overflow-auto mt-1">
+          <For each={props.completions()}>{(comp, idx) => (
             <div
               class={`px-3 py-2 cursor-pointer flex justify-between items-center ${
-                idx === props.selectedCompletion()
+                idx() === props.selectedCompletion()
                   ? "bg-blue-100"
                   : "hover:bg-gray-100"
               }`}
               onClick={() => {
-                props.onSelectCompletion(idx);
+                props.onSelectCompletion(idx());
                 props.onAcceptCompletion();
               }}
             >
@@ -70,7 +70,7 @@ export const CommanderInput: Component<CommanderInputProps> = (props) => {
                 <span class="text-xs text-gray-500">{comp.description}</span>
               </Show>
             </div>
-          ))}
+          )}</For>
         </div>
       </Show>
     </div>