Merge pull request #1531 from appwrite/fix-edit-attribute-modal-safari

fix: bad modals on safari
appwrite · Nov 21, 2024 · 9f754d3 · 9f754d3
2 parents 205c242 + a2141ee
commit 9f754d3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 24 deletions.
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { SvelteComponent, onMount } from 'svelte';
+    import { SvelteComponent, onMount, tick } from 'svelte';
     import { FormItem, FormItemPart, Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
     import TextCounter from './textCounter.svelte';
@@ -30,8 +30,9 @@
     let error: string;
     let show = false;
 
-    onMount(() => {
+    onMount(async () => {
         if (element && autofocus) {
+            await tick();
             element.focus();
         }
     });

diff --git a/...ct-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/...ct-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
@@ -65,19 +65,19 @@
     }
 </script>
 
-{#if selectedAttribute}
-    <Modal {error} size="big" bind:show={showEdit} onSubmit={submit} icon={option?.icon}>
-        <svelte:fragment slot="title">
-            <div class="u-flex u-cross-center u-gap-8">
-                {option?.name}
-                {#if option?.type === 'relationship'}
-                    <div class="tag eyebrow-heading-3">
-                        <span class="text u-x-small">Beta</span>
-                    </div>
-                {/if}
-            </div>
-        </svelte:fragment>
-        <FormList>
+<Modal {error} size="big" bind:show={showEdit} onSubmit={submit} icon={option?.icon}>
+    <svelte:fragment slot="title">
+        <div class="u-flex u-cross-center u-gap-8">
+            {option?.name}
+            {#if option?.type === 'relationship'}
+                <div class="tag eyebrow-heading-3">
+                    <span class="text u-x-small">Beta</span>
+                </div>
+            {/if}
+        </div>
+    </svelte:fragment>
+    <FormList>
+        {#if selectedAttribute}
             {#if selectedAttribute?.type !== 'relationship'}
                 <InputText
                     id="key"
@@ -93,10 +93,10 @@
                     bind:data={selectedAttribute}
                     on:close={() => (option = null)} />
             {/if}
-        </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showEdit = false)}>Cancel</Button>
-            <Button submit disabled={deepEqual(currentAttr, selectedAttribute)}>Update</Button>
-        </svelte:fragment>
-    </Modal>
-{/if}
+        {/if}
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showEdit = false)}>Cancel</Button>
+        <Button submit disabled={deepEqual(currentAttr, selectedAttribute)}>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/tests/unit/elements/inputText.test.ts b/tests/unit/elements/inputText.test.ts
@@ -2,6 +2,7 @@ import { expect, test } from 'vitest';
 import { render } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { InputText } from '../../../src/lib/elements/forms';
+import { tick } from 'svelte';
 
 test('shows text input', () => {
     const { getByText, getByLabelText } = render(InputText, { id: 'input', label: 'input' });
@@ -24,9 +25,9 @@ test('shows text input - disabled', () => {
     expect(getByLabelText('input')).toBeDisabled();
 });
 
-test('shows text input - autofocus', () => {
+test('shows text input - autofocus', async () => {
     const { getByLabelText } = render(InputText, { id: 'input', label: 'input', autofocus: true });
-
+    await tick();
     expect(getByLabelText('input')).toHaveFocus();
 });