Merge pull request #384 from appwrite/fix-input-select-error

Author: ItzNotABug

v2/pink-sb/src/lib/input/Select.svelte

@@ -81,7 +81,9 @@
 <Base {id} {label} {helper} {state} {required} {leadingIcon}>
     <slot name="info" slot="info" />
     <input
-        type="hidden"
+        type="text"
+        class="hidden"
+        tabindex="-1"
         {...$$restProps}
         {disabled}
         {readonly}
@@ -156,6 +158,19 @@
     @use './input';
     @use '../../scss/mixins/transitions';
 
+    .hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+        pointer-events: none;
+    }
+
     .selected {
         display: inline;
         overflow: hidden;

v2/pink-sb/src/stories/input/Select.stories.svelte

@@ -172,7 +172,7 @@
     } satisfies Meta;
 </script>
 
-<script>
+<script lang="ts">
     import { Story, Template } from '@storybook/addon-svelte-csf';
     import Select from '$lib/input/Select.svelte';
     import { Button } from '$lib/button/index.js';
@@ -181,6 +181,21 @@
     import Modal from '$lib/Modal.svelte';
 
     let open = false;
+
+    let error: string | null = null;
+    let value: string | null = null;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        const element = event.target as HTMLInputElement;
+
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        error = element.validationMessage;
+    };
 </script>
 
 <Template let:args>
@@ -246,3 +261,30 @@
     </Modal>
     <Button on:click={() => (open = !open)}>Open Modal</Button>
 </Story>
+
+<Story name="Form">
+    <form
+        on:submit={(e) => {
+            e.preventDefault();
+            console.log('Form submitted successfully!');
+        }}
+    >
+        <Stack gap="m">
+            <Select
+                {value}
+                required
+                label="Country"
+                placeholder="Select a country"
+                state={error ? 'error' : 'default'}
+                helper={error ?? 'Please select your country'}
+                options={[
+                    { label: 'Germany', value: 'de' },
+                    { label: 'India', value: 'in' },
+                    { label: 'United States', value: 'us' }
+                ]}
+                on:invalid={handleInvalid}
+            />
+            <Button type="submit">Submit</Button>
+        </Stack>
+    </form>
+</Story>