@omnitend/dashboard-for-laravel 0.43.0 → 0.44.0

package/resources/js/components/extended/DXField.vue

@@ -13,7 +13,10 @@
 <template>
     <!-- Full-width span field: delegate entirely to the #span slot, bypassing
          the label and built-in control (and the shell). -->
-    <div v-if="field.span" :class="field.class || 'mb-3'">
+    <!-- `data-dx-field-key` (the field's data path: `name`, or
+         `lines.0.price` inside a repeater) is how DXForm finds a field to
+         scroll to and focus after a failed submit (#194). -->
+    <div v-if="field.span" :class="field.class || 'mb-3'" :data-dx-field-key="valuePath">
         <!--
           @slot Replaces the entire field with custom full-width content when `field.span` is set, bypassing the label and built-in control.
           @binding {FieldDefinition} field The field definition being rendered.
@@ -34,6 +37,7 @@
          control that goes inside is chosen by field.type in the default slot. -->
     <DXFieldShell
         v-else
+        :data-dx-field-key="valuePath"
         :field="field"
         :form="form"
         :error-key="errorKey"
@@ -264,7 +268,7 @@
                     :state="fieldState"
                     :disabled="isDisabled || isReadonly || isPlaintext"
                     :control-props="controlPropsWithGuards"
-                    :options-ready="searchableOptionsReady"
+                    :options-pending="optionsPending"
                     @update:model-value="setValue"
                 />
 
@@ -780,12 +784,6 @@ const isPlaintext = computed(() => resolveMaybe(props.field.plaintext) ?? false)
 
 const passwordRevealed = ref(false);
 
-// See the template: the searchable select can't render before its options
-// resolve, or it shows the raw id instead of the option's label.
-const searchableOptionsReady = computed(
-    () => !props.field.optionsLoader || loadedOptions.value !== null,
-);
-
 const isRevealablePassword = computed(
     () =>
         props.field.type === "password" &&
@@ -856,7 +854,15 @@ const datalistId = useId();
 
 // ————————————————— async options
 
-const { loadedOptions } = useAsyncOptions(() => props.field, effectiveModel);
+const { loadedOptions, firstLoadSettled } = useAsyncOptions(
+    () => props.field,
+    effectiveModel,
+);
+
+// The first load has not settled: nothing to label the value with yet. Once
+// it has (even by failing, which leaves the static options), a reload never
+// makes the field pending again: it keeps what it already shows.
+const optionsPending = computed(() => !firstLoadSettled.value);
 
 const resolvedOptions = computed<FieldOption[] | undefined>(
     () => loadedOptions.value ?? props.field.options,