From abd5a85ba1228b5a6f16a4cd83d1a2ae9aabca91 Mon Sep 17 00:00:00 2001
From: Draconizations <jake.fulminated@gmail.com>
Date: Fri, 20 May 2022 13:22:20 +0200
Subject: [PATCH] feat(dashboard): focus on modal when open

---
 dashboard/src/lib/group/Privacy.svelte    | 11 ++++++++---
 dashboard/src/lib/member/Privacy.svelte   | 12 +++++++++---
 dashboard/src/lib/member/ProxyTags.svelte | 11 +++++++++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/lib/group/Privacy.svelte b/dashboard/src/lib/group/Privacy.svelte
index 2e727571..ad37f15d 100644
--- a/dashboard/src/lib/group/Privacy.svelte
+++ b/dashboard/src/lib/group/Privacy.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, tick } from "svelte";
     import { ModalBody, ModalHeader, Col, Row, Input, Label, ModalFooter, Button, Spinner, Alert } from "sveltestrap";
 
     import { Group } from '../../api/types';
@@ -53,6 +53,11 @@
             loading = false;
         }
     }
+
+    async function focus(el) {
+        await tick();
+        el.focus();
+    }
 </script>
 
 
@@ -60,10 +65,10 @@
     <Alert color="danger">{err}</Alert>
     {/if}
     <Label><b>Set all to:</b></Label>
-    <Input type="select" bind:value={allPrivacy}>
+    <select class="form-select" bind:value={allPrivacy} use:focus>
         <option>public</option>
         <option>private</option>
-    </Input>
+    </select>
     <hr />
     <Row>
         <Col xs={12} lg={6} class="mb-3">
diff --git a/dashboard/src/lib/member/Privacy.svelte b/dashboard/src/lib/member/Privacy.svelte
index 4014c092..53d5afa5 100644
--- a/dashboard/src/lib/member/Privacy.svelte
+++ b/dashboard/src/lib/member/Privacy.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, tick } from "svelte";
     import { Col, Row, Input, Label, Button, Alert, Spinner } from "sveltestrap";
 
     import { Member } from '../../api/types';
@@ -54,6 +54,12 @@
             loading = false;
         }
     }
+
+    async function focus(el) {
+        await tick();
+        el.focus();
+    }
+
 </script>
 
 
@@ -61,10 +67,10 @@
     <Alert color="danger">{err}</Alert>
     {/if}
     <Label><b>Set all to:</b></Label>
-    <Input type="select" bind:value={allPrivacy}>
+    <select class="form-select" bind:value={allPrivacy} use:focus>
         <option>public</option>
         <option>private</option>
-    </Input>
+    </select>
     <hr />
     <Row>
         <Col xs={12} lg={6} class="mb-3">
diff --git a/dashboard/src/lib/member/ProxyTags.svelte b/dashboard/src/lib/member/ProxyTags.svelte
index 57f6040f..483cf73d 100644
--- a/dashboard/src/lib/member/ProxyTags.svelte
+++ b/dashboard/src/lib/member/ProxyTags.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, tick } from "svelte";
     import { Col, Row, Input, Label, Button, Alert, Spinner, InputGroup } from "sveltestrap";
 
     import { Member } from '../../api/types';
@@ -43,6 +43,13 @@
             loading = false;
         }
     }
+
+    async function focus(el, first) {
+        if (first) {
+        await tick();
+        el.focus();
+        }
+    }
 </script>
 
 {#if err}
@@ -52,7 +59,7 @@
     {#each input as proxyTag, index (index)}
     <Col xs={12} lg={6} class="mb-2">
         <InputGroup>
-            <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.prefix} />
+            <textarea class="form-control" style="resize: none; height: 1em" bind:value={proxyTag.prefix} use:focus={index === 0 ? true : false}/>
             <Input disabled value="text"/>
             <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.suffix}/>
         </InputGroup>