<baht-reference-picker>

Reference lookup: read-only input plus a magnifier that opens a typeahead. You supply fetcher(term); it owns debounce, dropdown and keyboard.

Lookup with a fetcher

Clearing emits baht-change with empty value and label. Set href to add an open-record link.

<baht-reference-picker label="Assigned to" placeholder="Search people"></baht-reference-picker>

<script>
  const el = document.querySelector('baht-reference-picker');
  const people = [
  { value: 'u1', label: 'Alice Tanaka' },
  { value: 'u2', label: 'Nok Srisuk' },
  { value: 'u3', label: 'Chai Boonmee' },
  ];
  el.fetcher = (term) =>
  Promise.resolve(people.filter((p) => p.label.toLowerCase().includes(term.toLowerCase())));
  el.addEventListener('baht-change', (e) => console.log(e.detail)); // { value, label }
</script>

Props

Name	Type	Default	Description
`label`	`string`	`'Reference'`	Field label
`value`	`string`	`''`	Selected record id
`display`	`string`	`''`	Text shown for the value
`placeholder`	`string`	`''`	Input placeholder
`disabled`	`boolean`	`false`	Disabled
`invalid`	`boolean`	`false`	Error styling
`href`	`string`	`''`	Open-record link next to the lookup
`lookup-label`	`string`	`'Look up records'`	Accessible name of the magnifier
`debounce`	`number`	`200`	Milliseconds before a search
`fetcher`JS	`((term: string) => Promise<ReferenceOption[]>) \| null`	`null`	Search function; options are { value, label }

Events

Event	detail	Description
`name`	CustomEvent
`baht-change`	`{ value, label }`	A record picked or cleared