fix(ui): add 'enter' key handler to domain-input component

R1shabh-Gupta · Aug 20, 2024 · d0abe2e · d0abe2e
1 parent f6625ed
commit d0abe2e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/frontend/app/dashboard/domaintracer/page.tsx b/frontend/app/dashboard/domaintracer/page.tsx
@@ -55,7 +55,11 @@ const DomainTracer = () => {
       </h1>
 
       <form className="flex w-full items-start gap-2 my-6">
-        <DomainInput value={domain} onValueChange={setDomain} />
+        <DomainInput
+          value={domain}
+          onValueChange={setDomain}
+          onSubmit={handleDomainSubmit}
+        />
         <Tooltip showArrow content="Send message">
           <Button
             isIconOnly

diff --git a/frontend/components/ui/domain-input.tsx b/frontend/components/ui/domain-input.tsx
@@ -6,8 +6,12 @@ import { cn } from "@/lib/utils";
 import { Textarea } from "@nextui-org/react";
 import React from "react";
 
-const DomainInput = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ classNames = {}, ...props }, ref) => {
+interface DomainInputProps extends TextAreaProps {
+  onSubmit?: () => void;
+}
+
+const DomainInput = React.forwardRef<HTMLTextAreaElement, DomainInputProps>(
+  ({ classNames = {}, onSubmit, ...props }, ref) => {
     return (
       <Textarea
         ref={ref}
@@ -19,11 +23,19 @@ const DomainInput = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
           input: cn("py-0", classNames?.input),
         }}
         minRows={1}
-        maxRows={2}
+        maxRows={1}
         placeholder="Enter your domain here"
         radius="lg"
         variant="bordered"
         {...props}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            if (onSubmit) {
+              onSubmit();
+            }
+          }
+        }}
       />
     );
   }