Merge pull request modelcontextprotocol#767 from pja-ant/fix766

Fix issue 766 - Completions not populated until you start typing

Author: olaservo

client/src/components/PromptsTab.tsx

@@ -63,9 +63,7 @@ const PromptsTab = ({
     clearCompletions();
   }, [clearCompletions, selectedPrompt]);
 
-  const handleInputChange = async (argName: string, value: string) => {
-    setPromptArgs((prev) => ({ ...prev, [argName]: value }));
-
+  const triggerCompletions = (argName: string, value: string) => {
     if (selectedPrompt) {
       requestCompletions(
         {
@@ -79,6 +77,16 @@ const PromptsTab = ({
     }
   };
 
+  const handleInputChange = async (argName: string, value: string) => {
+    setPromptArgs((prev) => ({ ...prev, [argName]: value }));
+    triggerCompletions(argName, value);
+  };
+
+  const handleFocus = async (argName: string) => {
+    const currentValue = promptArgs[argName] || "";
+    triggerCompletions(argName, currentValue);
+  };
+
   const handleGetPrompt = () => {
     if (selectedPrompt) {
       getPrompt(selectedPrompt.name, promptArgs);
@@ -143,6 +151,7 @@ const PromptsTab = ({
                       onInputChange={(value) =>
                         handleInputChange(arg.name, value)
                       }
+                      onFocus={() => handleFocus(arg.name)}
                       options={completions[arg.name] || []}
                     />
 

client/src/components/ui/combobox.tsx

@@ -19,6 +19,7 @@ interface ComboboxProps {
   value: string;
   onChange: (value: string) => void;
   onInputChange: (value: string) => void;
+  onFocus?: () => void;
   options: string[];
   placeholder?: string;
   emptyMessage?: string;
@@ -29,13 +30,24 @@ export function Combobox({
   value,
   onChange,
   onInputChange,
+  onFocus,
   options = [],
   placeholder = "Select...",
   emptyMessage = "No results found.",
   id,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
 
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      if (newOpen && onFocus) {
+        onFocus();
+      }
+    },
+    [onFocus],
+  );
+
   const handleSelect = React.useCallback(
     (option: string) => {
       onChange(option);
@@ -52,7 +64,7 @@ export function Combobox({
   );
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <Button
           variant="outline"