SEV-408: combobox displayValue option (show code, search by label) v0.5.0
When displayValue:true, the input shows the selected option's value (e.g. a
state code "TX") while the dropdown stays label-searchable ("Texas") — for a
field searched by name but displayed compactly. Backward-compatible
(default false). 20/20 tests pass.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
+7
-2
@@ -46,6 +46,10 @@ export function comboboxData(config = {}) {
|
||||
const allowFree = config.allowFree !== false;
|
||||
const fuzzy = config.fuzzy !== false;
|
||||
const limit = config.limit || 50;
|
||||
// displayValue: after selecting, show the option's VALUE (e.g. a state code
|
||||
// "TX") in the input instead of its LABEL ("Texas"), while the dropdown stays
|
||||
// label-searchable. Lets a field be searched by name but display the code.
|
||||
const displayValue = config.displayValue === true;
|
||||
|
||||
return {
|
||||
value: config.value ?? '',
|
||||
@@ -89,7 +93,8 @@ export function comboboxData(config = {}) {
|
||||
return;
|
||||
}
|
||||
const match = this._options.find((o) => o.value === String(v));
|
||||
this.query = match ? match.label : allowFree ? String(v) : '';
|
||||
if (match) this.query = displayValue ? match.value : match.label;
|
||||
else this.query = allowFree ? String(v) : '';
|
||||
},
|
||||
|
||||
get filtered() {
|
||||
@@ -121,7 +126,7 @@ export function comboboxData(config = {}) {
|
||||
|
||||
choose(opt) {
|
||||
this.value = opt.value;
|
||||
this.query = opt.label;
|
||||
this.query = displayValue ? opt.value : opt.label;
|
||||
this.close();
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user