added select readonly prop and updated the disabled schema field state

ui/src/components/collections/schema/SchemaField.svelte

@@ -120,7 +120,8 @@
     draggable={true}
     class="schema-field"
     class:required={field.required}
-    class:expanded={showOptions}
+    class:expanded={interactive && showOptions}
+    class:deleted={field.toDelete}
     class:drag-over={isDragOver}
     transition:slide|local={{ duration: 150 }}
     on:dragstart={(e) => {

ui/src/components/collections/schema/SchemaFieldFile.svelte

@@ -85,14 +85,14 @@
         <div class="separator" />
 
         <Field
-            class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
+            class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
             inlineError
             let:uniqueId
         >
             <ObjectSelect
                 id={uniqueId}
                 items={isSingleOptions}
-                disabled={!interactive}
+                readonly={!interactive}
                 bind:keyOfSelected={isSingle}
             />
         </Field>

ui/src/components/collections/schema/SchemaFieldRelation.svelte

@@ -116,7 +116,7 @@
                 noOptionsText="No collections found"
                 selectionKey="id"
                 items={$collections}
-                disabled={!interactive || field.id}
+                readonly={!interactive || field.id}
                 bind:keyOfSelected={field.options.collectionId}
             >
                 <svelte:fragment slot="afterOptions">
@@ -136,14 +136,14 @@
         <div class="separator" />
 
         <Field
-            class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
+            class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
             inlineError
             let:uniqueId
         >
             <ObjectSelect
                 id={uniqueId}
                 items={isSingleOptions}
-                disabled={!interactive}
+                readonly={!interactive}
                 bind:keyOfSelected={isSingle}
             />
         </Field>

ui/src/components/collections/schema/SchemaFieldSelect.svelte

@@ -55,7 +55,7 @@
         <div class="separator" />
 
         <Field
-            class="form-field required {!interactive ? 'disabled' : ''}"
+            class="form-field required {!interactive ? 'readonly' : ''}"
             inlineError
             name="schema.{key}.options.values"
             let:uniqueId
@@ -65,7 +65,7 @@
                     id={uniqueId}
                     placeholder="Choices: eg. optionA, optionB"
                     required
-                    disabled={!interactive}
+                    readonly={!interactive}
                     bind:value={field.options.values}
                 />
             </div>
@@ -74,14 +74,14 @@
         <div class="separator" />
 
         <Field
-            class="form-field form-field-single-multiple-select {!interactive ? 'disabled' : ''}"
+            class="form-field form-field-single-multiple-select {!interactive ? 'readonly' : ''}"
             inlineError
             let:uniqueId
         >
             <ObjectSelect
                 id={uniqueId}
                 items={isSingleOptions}
-                disabled={!interactive}
+                readonly={!interactive}
                 bind:keyOfSelected={isSingle}
             />
         </Field>