Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@spectrum-web-components/combobox
Advanced tools
Changelog
0.42.2 (2024-04-03)
Note: Version bump only for package @adobe/spectrum-web-components
Readme
An <sp-combobox>
allows users to filter lists to only the options matching a query. It's composed of a textfield, a picker button, and child menu items.
yarn add @spectrum-web-components/combobox
Import the side effectful registration of <sp-combobox>
via:
import '@spectrum-web-components/combobox/sp-combobox.js';
When looking to leverage the Combobox
base class as a type and/or for extension purposes, do so via:
import { Combobox } from '@spectrum-web-components/combobox';
<sp-combobox size="s" label="Color">
<sp-menu-item value="red">Red</sp-menu-item>
<sp-menu-item value="green">Green</sp-menu-item>
<sp-menu-item value="blue">Blue</sp-menu-item>
</sp-combobox>
Medium
<sp-combobox size="m" label="Color">
<sp-menu-item value="red">Red</sp-menu-item>
<sp-menu-item value="green">Green</sp-menu-item>
<sp-menu-item value="blue">Blue</sp-menu-item>
</sp-combobox>
Large
<sp-combobox size="l" label="Color">
<sp-menu-item value="red">Red</sp-menu-item>
<sp-menu-item value="green">Green</sp-menu-item>
<sp-menu-item value="blue">Blue</sp-menu-item>
</sp-combobox>
Extra Large
<sp-combobox size="xl" label="Color">
<sp-menu-item value="red">Red</sp-menu-item>
<sp-menu-item value="green">Green</sp-menu-item>
<sp-menu-item value="blue">Blue</sp-menu-item>
</sp-combobox>
A combobox must be labeled.
Typically, you should render a visible label via <sp-field-label>
.
For exceptional cases, provide an accessible label via the label
attribute.
<sp-field-label for="color">Color</sp-field-label>
<sp-combobox id="color">
<sp-menu-item value="red">Red</sp-menu-item>
<sp-menu-item value="green">Green</sp-menu-item>
<sp-menu-item value="blue">Blue</sp-menu-item>
</sp-combobox>
Combobox options are presented as a popup menu.
Menu items can be provided via markup as <sp-menu-item>
children, or by assigning an array to the options
property of an <sp-combobox>
.
Instead of providing <sp-menu-item>
children, you can assign an array of ComboboxOptions
to the options
property, and <sp-combobox>
will create matching menu items:
<sp-combobox id="color" label="Color"></sp-combobox>
<script>
document.getElementById('color').options = [
{ value: "red", itemText: "Red" },
{ value: "green", itemText: "Green" },
{ value: "blue", itemText: "Blue" }
];
</script>
When you replace the options
Array, or add/remove <sp-menu-item>
children, the <sp-combobox>
will detect that change and update its popup menu contents.
For example, using Lit:
render() {
return html`<sp-combobox label="Color" .options=${this.colorOptions}></sp-combobox>`;
}
mutate() {
this.colorOptions = [
...this.colorOptions,
{ value: 'purple', itemText: 'Purple' }
];
}
The text in an <sp-combobox>
is editable, and the string the user has typed in will become the value
of the combobox unless the user selects a different value in the popup menu.
autocomplete="none"
The suggested popup menu items will remain the same regardless of the currently-input value.
Whenever the currently-typed input exactly matches the value
of a popup menu item, that item is automatically selected.
autocomplete="list"
The popup menu items are filtered to only those completing the currently-input value.
The combobox supports both mouse and keyboard navigation. Mobile behavior is currently unspecified.
When an <sp-combobox>
is focused, pressing the down arrow moves focus to the first menu item in the popup menu.
The up and down arrows then move between available menu items.
The escape key dismisses the popup menu if open. Otherwise, it clears the combobox's textfield.
The enter key sets the value
of the focused <sp-combobox>
.
If the popup menu is open, the value is set to the value
of the selected menu item, returning focus back to the combobox's textfield.
FAQs
An `<sp-combobox>` allows users to filter lists to only the options matching a query. It's composed of a textfield, a picker button, and child menu items.
The npm package @spectrum-web-components/combobox receives a total of 275 weekly downloads. As such, @spectrum-web-components/combobox popularity was classified as not popular.
We found that @spectrum-web-components/combobox demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.