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:
Johannes 2022-07-23 15:15:11 +02:00 committed by GitHub
commit 8bd615b250
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 4 deletions

View file

@ -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}"
/>