close drawer when added, no alias autocomplete

atuinsh · Apr 10, 2024 · 496b6ef · 496b6ef
1 parent 1003094
commit 496b6ef
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/ui/src/components/Drawer.tsx b/ui/src/components/Drawer.tsx
@@ -2,9 +2,15 @@ import * as React from "react";
 
 import { Drawer as VDrawer } from "vaul";
 
-export default function Drawer({ trigger, children, width }: any) {
+export default function Drawer({
+  trigger,
+  children,
+  width,
+  open,
+  onOpenChange,
+}: any) {
   return (
-    <VDrawer.Root direction="right">
+    <VDrawer.Root direction="right" open={open} onOpenChange={onOpenChange}>
       <VDrawer.Trigger asChild>{trigger}</VDrawer.Trigger>
       <VDrawer.Portal>
         <VDrawer.Overlay className="fixed inset-0 bg-black/40 z-50" />

diff --git a/ui/src/components/dotfiles/Aliases.tsx b/ui/src/components/dotfiles/Aliases.tsx
@@ -80,6 +80,10 @@ function AddAlias({ onAdd: onAdd }: { onAdd?: () => void }) {
 
         <input
           className="mt-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+          autoComplete="off"
+          autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
           type="text"
           value={value}
           onChange={(e) => setValue(e.target.value)}
@@ -98,6 +102,7 @@ function AddAlias({ onAdd: onAdd }: { onAdd?: () => void }) {
 
 export default function Aliases() {
   let [aliases, setAliases] = useState([]);
+  let [aliasDrawerOpen, setAliasDrawerOpen] = useState(false);
 
   const columns: ColumnDef<Alias>[] = [
     {
@@ -153,6 +158,8 @@ export default function Aliases() {
         </div>
         <div className="mt-4 sm:ml-16 sm:mt-0 flex-row">
           <Drawer
+            open={aliasDrawerOpen}
+            onOpenChange={setAliasDrawerOpen}
             width="30%"
             trigger={
               <button
@@ -163,7 +170,12 @@ export default function Aliases() {
               </button>
             }
           >
-            <AddAlias onAdd={() => loadAliases(setAliases)} />
+            <AddAlias
+              onAdd={() => {
+                loadAliases(setAliases);
+                setAliasDrawerOpen(false);
+              }}
+            />
           </Drawer>
         </div>
       </div>