sveltel fixes

front/js/svelte/records/elements/Datalist.svelte

@@ -36,7 +36,10 @@
 
 {#if field.optionsFrom}
     {#each options as option (option.id)}
-        <div on:click={(e) => select(e, option)}>
+        <div
+                on:click={(e) => select(e, option)}
+                on:keypress={(e) => select(e, option)}
+        >
             <span class="dropdown-item">
                 {previewTitle(channel.schemas, option)}
                 <small class="text-muted "
@@ -51,6 +54,10 @@
                     value = search;
                     search = "";
                 }}
+                on:keypress={(e) => {
+                    value = search;
+                    search = "";
+                }}
             >
                 <span class="dropdown-item">
                     Add "{search}"

front/js/svelte/records/elements/Date.svelte

@@ -58,7 +58,6 @@
                 placeholder="Search for options"
                 data-bs-toggle="dropdown"
                 autocomplete="off"
-                aria-expanded="false"
                 readonly={field.readonly && !isCreateMode}
             />
             <button

front/js/svelte/records/elements/Datetime.svelte

@@ -9,7 +9,6 @@
 
     export let field;
     export let value;
-    export let schema;
     export let isCreateMode;
     export let validationErrors;
     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -65,7 +64,6 @@
                 placeholder="Search for options"
                 data-bs-toggle="dropdown"
                 autocomplete="off"
-                aria-expanded="false"
                 readonly={field.readonly && !isCreateMode}
             />
             <button

front/js/svelte/records/elements/Number.svelte

@@ -41,7 +41,6 @@
                 class:is-invalid={errorMessage}
                 data-bs-toggle="dropdown"
                 autocomplete="off"
-                aria-expanded="false"
                 readonly={field.readonly && !isCreateMode}
             />
 

front/js/svelte/records/elements/ReferenceTable.svelte

@@ -14,8 +14,6 @@
 
     export let record;
     export let graph;
-    export let schema;
-    export let children;
     export let validationErrors;
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 

front/js/svelte/records/elements/Selectlist.svelte

@@ -0,0 +1,23 @@
+<script>
+    export let field;
+    export let value;
+    export let search;
+     function select(e, option) {
+        e.preventDefault();
+        value = option;
+        search = "";
+    }
+</script>
+
+{#if field.selectOptions}
+    {#each field.selectOptions as suggestion (suggestion)}
+        <div
+                on:click={(e) => select(e, suggestion)}
+                on:keypress={(e) => select(e, suggestion)}
+        >
+            <span class="dropdown-item">
+               {suggestion}
+            </span>
+        </div>
+    {/each}
+{/if}

front/js/svelte/records/elements/Slug.svelte

@@ -0,0 +1,30 @@
+<script>
+    import { getErrorMessage } from "./errorMessage";
+    export let field;
+    export let value;
+    export let isCreateMode;
+    export let validationErrors;
+    let thisEl;
+    $: errorMessage = getErrorMessage(validationErrors, field.name);
+    export let id;
+
+</script>
+
+<div class="mb-0">
+    <input
+            type="text"
+            {id}
+            class="form-control"
+            class:is-invalid={errorMessage}
+            bind:value
+            autocomplete="off"
+            readonly={field.readonly && !isCreateMode}
+    />
+
+    {#if errorMessage}
+        <div class="invalid-feedback d-block">
+            {errorMessage}
+        </div>
+    {/if}
+</div>
+

front/js/svelte/records/elements/Text.svelte

@@ -1,5 +1,6 @@
 <script>
     import Datalist from "./Datalist.svelte";
+    import Selectlist from "./Selectlist.svelte";
     import {getErrorMessage} from "./errorMessage";
 
     export let field;
@@ -13,6 +14,10 @@
     let list;
 
     $: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
+
+
+
+
 </script>
 
 <div class="mb-0">
@@ -29,7 +34,6 @@
                 placeholder="Search for options"
                 data-bs-toggle="dropdown"
                 autocomplete="off"
-                aria-expanded="false"
                 readonly={field.readonly && !isCreateMode}
             />
 
@@ -58,6 +62,42 @@
                 </div>
             </span>
         {/if}
+    {:else if   field.selectOptions}
+        <div class="dropdown">
+            <input
+                    type="search"
+                    {id}
+                    class="form-control dropdown-toggle"
+                    class:is-invalid={errorMessage}
+                    bind:value={search}
+                    placeholder="Search for options"
+                    data-bs-toggle="dropdown"
+                    autocomplete="off"
+                    readonly={field.readonly && !isCreateMode}
+            />
+
+            <div class="dropdown-menu w-100">
+                    <Selectlist
+                            {field}
+                            bind:value
+                            bind:search
+                    />
+            </div>
+        </div>
+        {#if value}
+            <span class="badge rounded-pill bg-light text-dark  fs-6 mt-3">
+                <div class="d-flex align-items-center ">
+                    {value}
+                    <button
+                            on:click|preventDefault={(e) => (value = "")}
+                            type="button"
+                            class="btn-close btn-sm  ms-1"
+                            style="font-size:10px"
+                            aria-label="Close"
+                    />
+                </div>
+            </span>
+        {/if}
     {:else}
         <input
             type="text"