huntabyte / vaul-svelte

An unstyled drawer component for Svelte.
https://vaul-svelte.com
MIT License
469 stars 19 forks source link

Input gets hidden on bind:value #90

Open milimyname opened 3 months ago

milimyname commented 3 months ago

Describe the bug

First of all, I thank u for ur work and videos. They are the best!

When on:input or bind:value used, the last input gets hidden by the mobile keyboard once user types in.

Alternative Solution to use on:change instead but it ain't ideal since I wanna trigger e.g a button enabled if form input gets a new value.

<script lang="ts">

       let value = {
        value1: '',
        value2: '',
        value3: '',
    };

    function onChange(event: Event, v: string) {
        const target = event.target as HTMLInputElement;
        value[v] = target.value;
    }
</script>

<input
    class="my-8 border border-gray-400"
    placeholder="Input"
    on:change={(e) => onChange(e, 'value1')}
/>

Reproduction

Here is the sandboxed project

<script lang="ts">
    import { Drawer } from 'vaul-svelte';

    let value1: string;
    let value2: string;
    let value3: string;
</script>

<Drawer.Root>
    <Drawer.Trigger>Open Drawer</Drawer.Trigger>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content
        class="fixed bottom-0 left-0 right-0 flex max-h-[96%] flex-col rounded-t-[10px] bg-white"
    >
        <div class="mx-auto flex w-full max-w-md flex-col overflow-auto rounded-t-[10px] p-4">
            <input class="my-8 border border-gray-400" placeholder="Input" bind:value={value1} />
            <p>
                But I must explain to you how all this mistaken idea of denouncing pleasure and praising
                pain was born and I will give you a complete account of the system, and expound the actual
                teachings of the great explorer of the truth, the master-builder of human happiness. No one
                rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who
                do not know how to pursue pleasure rationally encounter consequences that are extremely
                painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself,
                because it is pain, but because occasionally circumstances occur in which toil and pain can
                procure him some great pleasure. To take a trivial example, which of us ever undertakes
                laborious physical exercise, except to obtain some advantage from it? But who has any right
                to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences,
                or one who avoids a pain that produces no resultant pleasure?
            </p>
            <input class="my-8 border border-gray-400" placeholder="Input" bind:value={value2} />
            <p>
                On the other hand, we denounce with righteous indignation and dislike men who are so
                beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that
                they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to
                those who fail in their duty through weakness of will, which is the same as saying through
                shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a
                free hour, when our power of choice is untrammelled and when nothing prevents our being able
                to do what we like best, every pleasure is to be welcomed and every pain avoided. But in
                certain circumstances and owing to the claims of duty or the obligations of business it will
                frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man
                therefore always holds in these matters to this principle of selection: he rejects pleasures
                to secure other greater pleasures, or else he endures pains to avoid worse pains.
            </p>
            <input bind:value={value3} class="my-8 border border-gray-400" placeholder="Input" />
        </div>
    </Drawer.Content>
</Drawer.Root>

https://github.com/user-attachments/assets/10285221-761d-4af1-aa74-e09b9e244211

Logs

No response

System Info

Test: Iphone 11 (IOS 17.5.1)

Severity

annoyance