@omnitend/dashboard-for-laravel 0.43.0 → 0.45.0

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

@@ -13,27 +13,26 @@
 -->
 <template>
     <!-- Searchable select: type to filter a long option list, while the model
-         keeps the option's VALUE (an id), not the typed text. -->
-    <template v-if="field.type === 'select' && field.searchable">
-        <DAutocomplete
-            v-if="optionsReady"
-            :model-value="modelValue"
-            :options="options"
-            :placeholder="field.placeholder"
-            :required="field.required"
-            :state="state"
-            :disabled="disabled"
-            open-on-focus
-            v-bind="controlProps"
-            @update:model-value="emit('update:modelValue', $event)"
-        />
-        <!-- BAutocomplete resolves the input's display text from the model AT
-             MOUNT and doesn't re-derive it when `options` arrive later, so an
-             async list would leave the raw id showing ("51" instead of
-             "Waitrose") — and a long list is exactly the case that loads async.
-             Hold the control until the options are in. -->
-        <DFormInput v-else placeholder="Loading…" disabled />
-    </template>
+         keeps the option's VALUE (an id), not the typed text. Async options
+         can arrive after it mounts: DAutocomplete then relabels the input
+         (0.42.1), so the control mounts at once (#189). Until the first load
+         lands it holds the value back (it would show as the raw id, "51"
+         rather than "Waitrose") and reads "Loading…", disabled. The guard is
+         bound AFTER the consumer's controlProps so they cannot lift it, and
+         nothing the control emits while the value is held back reaches the
+         form: it would be an edit of the empty stand-in, not of the value. -->
+    <DAutocomplete
+        v-if="field.type === 'select' && field.searchable"
+        :options="options"
+        :placeholder="field.placeholder"
+        :required="field.required"
+        :state="state"
+        :disabled="disabled"
+        open-on-focus
+        v-bind="{ ...controlProps, ...searchableLoadingGuard }"
+        :model-value="optionsPending ? heldBackValue : modelValue"
+        @update:model-value="onSearchableUpdate"
+    />
 
     <!-- Select (sync or async options) -->
     <DFormSelect
@@ -73,10 +72,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import DFormSelect from "../base/DFormSelect.vue";
 import DFormRadioGroup from "../base/DFormRadioGroup.vue";
 import DFormCheckboxGroup from "../base/DFormCheckboxGroup.vue";
-import DFormInput from "../base/DFormInput.vue";
 import DAutocomplete from "../base/DAutocomplete.vue";
 import type { FieldDefinition, FieldOption } from "../../types";
 
@@ -100,15 +99,32 @@ interface Props {
     controlProps?: Record<string, any>;
 
     /**
-     * Whether async options have resolved (a searchable select must not render
-     * before its options load, or it shows the raw id instead of the label).
+     * The field's first async options load is still in flight. A searchable
+     * select then shows "Loading…" instead of its value's raw id.
      */
-    optionsReady?: boolean;
+    optionsPending?: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
     (event: "update:modelValue", value: any): void;
 }>();
+
+// What the searchable select shows while its first options load: nothing
+// selected, in the shape the model has (an array for `multiple`).
+const heldBackValue = computed(() => (Array.isArray(props.modelValue) ? [] : null));
+
+// Applied over the consumer's controlProps, so `inputProps: { disabled: false }`
+// cannot re-enable the control while its value is held back.
+const searchableLoadingGuard = computed<Record<string, unknown>>(() =>
+    props.optionsPending ? { disabled: true, placeholder: "Loading…" } : {},
+);
+
+const onSearchableUpdate = (value: unknown): void => {
+    // An update while the value is held back edits the empty stand-in, not the
+    // value (a pick in multiple mode would drop every existing selection).
+    if (props.optionsPending) return;
+    emit("update:modelValue", value);
+};
 </script>

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"
                 />
 
@@ -401,7 +405,14 @@ import DXNumericField from "./DXNumericField.vue";
 import DXChoiceField from "./DXChoiceField.vue";
 import { useAsyncOptions } from "../../composables/useAsyncOptions";
 import type { UseFormReturn } from "../../composables/useForm";
-import type { FieldDefinition, FieldOption, FieldType, LabelCols } from "../../types";
+import type {
+    FieldDefinition,
+    FieldOption,
+    FieldType,
+    LabelCols,
+    MaybeFn,
+} from "../../types";
+import { humaniseErrorKey } from "../../utils/formErrorTargets";
 import { getByPath, setByPath } from "../../utils/objectPath";
 
 // Async to break the DXField <-> DXRepeater circular import.
@@ -615,6 +626,21 @@ function resolveMaybe<TValue>(
     return value;
 }
 
+/** Resolve display TEXT (label, hint, info, switch text) the way
+ *  resolveMaybe does, but a function that throws (a repeater row missing a
+ *  property it reads) gives `undefined` instead of breaking the render (#204).
+ *  Behaviour options (disabled, readonly, plaintext) stay unguarded: no
+ *  fallback for those is safe to guess. */
+function resolveText(
+    value: MaybeFn<string> | undefined,
+): string | undefined {
+    try {
+        return resolveMaybe(value);
+    } catch {
+        return undefined;
+    }
+}
+
 const fieldValue = computed({
     get: () =>
         usePathSemantics.value
@@ -687,13 +713,19 @@ function setValue(value: any): void {
 
 const fieldState = computed(() => props.form.getState(errorKey.value));
 
-const resolvedLabel = computed(
-    () => resolveMaybe(props.field.label) ?? props.field.key,
-);
+// A label function that throws falls back to the humanised key, as the
+// repeater's headers and the error summary do; a missing label still shows
+// the raw key, as it always has.
+const resolvedLabel = computed(() => {
+    if (typeof props.field.label !== "function") {
+        return props.field.label ?? props.field.key;
+    }
+    return resolveText(props.field.label) ?? humaniseErrorKey(props.field.key);
+});
 
-const resolvedHint = computed(() => resolveMaybe(props.field.hint));
+const resolvedHint = computed(() => resolveText(props.field.hint));
 
-const resolvedInfo = computed(() => resolveMaybe(props.field.info));
+const resolvedInfo = computed(() => resolveText(props.field.info));
 
 // ————————————————— switch-list (#160)
 
@@ -759,8 +791,8 @@ const switchModel = computed({
  */
 const switchText = computed(() => {
     const contextual = switchIsOn.value
-        ? resolveMaybe(props.field.textWhenTrue)
-        : resolveMaybe(props.field.textWhenFalse);
+        ? resolveText(props.field.textWhenTrue)
+        : resolveText(props.field.textWhenFalse);
     return contextual ?? resolvedLabel.value;
 });
 
@@ -780,12 +812,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 +882,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,