Merge pull request #2 from robGardiner01/FIX-new-message-focus

FIX: The input does not focus, on click of new message button in top right corner
GooeyAI · Aug 13, 2024 · a30d2ec · a30d2ec
2 parents e4d1c90 + 4c977f9
commit a30d2ec
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 3 deletions.
diff --git a/src/components/shared/Buttons/IconButton.tsx b/src/components/shared/Buttons/IconButton.tsx
@@ -9,7 +9,7 @@ const IconButton = ({
 }: ButtonProps) => {
   const btnClasses = clsx(`button-${variant?.toLowerCase()}`, className);
   return (
-    <button {...rest} className={btnClasses} onMouseDown={onClick}>
+    <button {...rest} className={btnClasses} onClick={onClick}>
       {rest.children}
     </button>
   );

diff --git a/src/lib.tsx b/src/lib.tsx
@@ -24,6 +24,7 @@ class GooeyEmbedFactory {
     }
     const innerDiv = document.createElement("div");
     innerDiv.style.display = "contents";
+    innerDiv.className = "inner-div";
     if(targetElem.children.length > 0) targetElem.removeChild(targetElem.children[0]);
     targetElem.appendChild(innerDiv);
     const root = renderCopilotChatWidget(innerDiv, config);

diff --git a/src/widgets/copilot/components/widget/index.tsx b/src/widgets/copilot/components/widget/index.tsx
@@ -22,7 +22,8 @@ const CopilotWidget: FC<CopilotWidgetType> = ({ isInline }) => {
   const handleEditClick = () => {
     cancelApiCall();
     flushData();
-    const ele = document.getElementById(CHAT_INPUT_ID);
+    const shadowRoot = document.getElementById(isInline ? "inline" : "popup")?.getElementsByClassName("inner-div")[0]?.shadowRoot;
+    const ele = shadowRoot?.getElementById(CHAT_INPUT_ID);
     ele?.focus();
   };
 

diff --git a/src/widgets/index.tsx b/src/widgets/index.tsx
@@ -37,7 +37,7 @@ export function CopilotChatWidget({ config }: { config?: any }) {
 }
 
 export function renderCopilotChatWidget(elem: Element, config?: any) {
-  const shadow = elem.attachShadow({ mode: "open" });
+  const shadow = elem.attachShadow({ mode: "open", delegatesFocus: true});
   const root = ReactDOM.createRoot(shadow);
   root.render(
     <React.StrictMode>