mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
fix(combobox): value should call itemToString
with filtered item (#1411)
Fixes #1405 When using the `shouldFilterItem` prop, the `ComboBox` does not display the custom label set with `itemToString` in the input after a selection.
This commit is contained in:
parent
e3f98cde4b
commit
8bd615b250
3 changed files with 44 additions and 4 deletions
|
@ -0,0 +1,34 @@
|
|||
<script>
|
||||
import { ComboBox } from "carbon-components-svelte";
|
||||
|
||||
const translation = {
|
||||
Slack: 'Custom label for "Slack"',
|
||||
Email: 'Custom label for "Email"',
|
||||
Fax: 'Custom label for "Fax"',
|
||||
};
|
||||
|
||||
function itemToString(item) {
|
||||
return translation[item.key];
|
||||
}
|
||||
|
||||
function shouldFilterItem(item, value) {
|
||||
if (!value) return true;
|
||||
const comparison = value.toLowerCase();
|
||||
return (
|
||||
item.key.toLowerCase().includes(comparison) ||
|
||||
itemToString(item).toLowerCase().includes(comparison)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<ComboBox
|
||||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
items="{[
|
||||
{ id: '0', key: 'Slack' },
|
||||
{ id: '1', key: 'Email' },
|
||||
{ id: '2', key: 'Fax' },
|
||||
]}"
|
||||
shouldFilterItem="{shouldFilterItem}"
|
||||
itemToString="{itemToString}"
|
||||
/>
|
Loading…
Add table
Add a link
Reference in a new issue