User Interface

EccDropDown

EccDropDown lets the user choose one or several options - as native select, as searchable list or with a server-side search.

TSX

 import { EccDropDown } from "@/ecc/components/forms/EccDropDown";

The component uses the basic props of all field components - see Component Basics.

EccDropDownSingle (@/ecc/components/forms/EccDropDownSingle) is the same component under its former name.

Options

options is an array of strings or objects (or a JSON string of such an array). keyAttribute and valueAttribute say which property is the key (written to the output) and which is the label. "$" (default) means the item itself.

TSX

 // strings: key and label are the same
<EccDropDown fieldLabel="Priority" options={["LOW", "MEDIUM", "HIGH"]} valueOut="purchase.priority" />

// objects
const types = [
  { id: "",                   label: "- please choose -" },
  { id: "it-hardware",        label: "IT Hardware" },
  { id: "it-software",        label: "IT Software" },
  { id: "medical-devices", label: "Medical devices" },
];

<EccDropDown id="purchase-request-type" fieldLabel="Request type"
             options={types} keyAttribute="id" valueAttribute="label"
             value="purchase.requestType" data={draft} valueOut mandatory />

value + data select the stored key when a draft is opened; initValue or selected set a default.

Search

TSX

 // local search in a long list
<EccDropDown fieldLabel="Cost center" options={costCenters} keyAttribute="nr" valueAttribute="name"
             typeAhead placeholder="Search cost center" valueOut="purchase.costCenter" />

// server-side search, called 250 ms after typing stops
async function searchSuppliers(query: string): Promise<unknown[]> {
  const res = await fetchSuppliers(query);         // your ApiService function
  return res.data;
}

<EccDropDown fieldLabel="Supplier" typeAhead typeAheadService={searchSuppliers}
             keyAttribute="id" valueAttribute="name" valueOut="purchase.supplier" />

Multiple selection

TSX

 <EccDropDown fieldLabel="Locations" options={locations} keyAttribute="id" valueAttribute="name"
             selectionMode="multiple" initValue={["ber", "muc"]} valueOut="purchase.locations"
             onMultiChange={(keys) => console.log(keys)} />

Output: an array of keys, e.g. ["ber", "muc"].

Loading state

TSX

 const [items, setItems] = useState<unknown[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => { loadCostCenters().then((d) => { setItems(d); setLoading(false); }); }, []);

<EccDropDown fieldLabel="Cost center" options={items} loading={loading} keyAttribute="nr" valueAttribute="name" />

Props

Basic props (id, fieldLabel, mandatory, valueOut, hidden, allowedGroups, …), plus:

Prop

Type

Default

Description

`options`	`unknown[]` or JSON string	-	items
`keyAttribute`	path	`"$"`	key of an item, written to the output
`valueAttribute`	path	`"$"`	label of an item
`value` + `data`	path, object	-	preselect the stored key(s)
`selected`	`string`	-	preselected key (single)
`initValue`	`string` or `string[]`	-	default if nothing else selects
`selectionMode`	`single`, `multiple`	`single`	one or several
`typeAhead`	`boolean`	`false`	searchable list
`typeAheadService`	`(query) => Promise`	-	server-side search
`placeholder`	`string`	-	hint in the search field when nothing is selected
`onChange`	`(key, item) => void`	-	single selection changed
`onMultiChange`	`(keys) => void`	-	multiple selection changed
`loading`	`boolean`	`false`	spinner, disabled
`disabled`	`boolean`	`false`	disabled

Without typeAhead and in single mode the component renders a native select - best for short lists.

Page

Relation

Component Basics	super component: basic props
EccRadioGroup	the same options, all visible at once

Sections