Summary
The Lookup component's initialInputValue prop was initially added as a workaround to avoid adding a v-model prop for the input value. Most dev users of Lookup don't need to read or write the input value, so it is just tracked inside Lookup, and initialInputValue was added as a way to set only the initial value if needed.
However, there is now a Wikifunctions use case for setting an initial input value that is later updated once more data about the initially selected item is fetched. They're getting around this by tricking the Lookup into re-rendering via a key, but ideally they could use a reactive prop as is supported by other components.
Original report
About initialInputValue
We use the cdx-lookup selector to search and select objects which have a "Zid" as their value, but we present them using the human-readable labels for the selected user language or closest fallback. When we edit a page, we use this selector to initially present the current value:
E.g. as seen in beta edit page for Z11:
The original values here are, however, the values in their Zid form. The cdx-lookup fields are rendered passing the available label to the initialInputValue prop. Initially the labels are not available, as they are being fetched on demand, so these reactive getters return the Zids while they are waiting for the labels to return:
When the labels are made available and the getter that generates the initialInputValue returns a human-readable label, the cdx-lookup component doesn't detect the change, so we need to re-render the component:
We do this with a bit of a hack:
- have a :key="lookupKey" property in the component
- watch changes in selectedLabel
- when the label changes (e.g. from "Z4" to "Type", as it becomes available in the store), we increment lookupKey to force a re-render
<cdx-lookup :key="lookupKey" <-------------------------- key to force re-render :selected="selectedValue" :disabled="disabled" :placeholder="lookupPlaceholder" :menu-items="lookupResults" :menu-config="lookupConfig" :end-icon="lookupIcon" :initial-input-value="selectedLabel" <---------------- watch changes of selectedLabel :status="errorLookupStatus" data-testid="z-object-selector-lookup" @update:selected="onSelect" @input="onInput" > <template #no-results> {{ $i18n( 'wikilambda-zobjectselector-no-results' ).text() }} </template> </cdx-lookup>watch: { selectedLabel: function () { // Trigger a rerender when initial input value changes, // This might occur due to slow network request for a particular label // Also make sure not to trigger rerender if the user has typed an input if ( !this.inputValue ) { this.lookupKey += 1; } }, ... }
Solution
We recently added a composable that enables a component to have an optional prop that is bound by v-model. We can use this inside Lookup to add a new inputValue prop that can be used to give the parent component control over reading and writing the input value. This can replace the initialInputValue prop, which can be deprecated and will be removed in Codex 2.0.
Acceptance criteria
- Lookup has a new optional prop, inputValue, that is bound via v-model
- The inputValue is used if provided, otherwise the Lookup will create an internal ref that defaults to the initialInputValue if provided or an empty string if not
- initialInputValue is deprecated
- A new demo is added to show how to set an initial selection and input value