feat(combobox): make combobox clearable #6972
Conversation
github-actions
bot
added
the
enhancement
| this.open = false; | ||
| event.stopPropagation(); | ||
| event.preventDefault(); |
There was a problem hiding this comment.
@macandcheese Tests seem to pass, but do you recall why the original event needed to stop propagating?
There was a problem hiding this comment.
It allowed focus to be set on the clicked Chip's close button, when user clicked the Chip, which was a change to support how Chips behaved post some Chip Group related changes.
Although looking at it in action (and compared to past behavior), that probably wasn't needed, so this should be fine to remove, and have focus instead shift to Combobox.
jcfranco
added
the
pr ready for visual snapshots
jcfranco
added
pr ready for visual snapshots
| toggleSelected(coerce?: boolean): Promise<void> { | ||
| if (this.disabled) { | ||
| toggleSelected(): Promise<void> { | ||
| const isSingleSelect = getElementProp(this.el, "selection-mode", "multiple") === "single"; |
There was a problem hiding this comment.
Just a note that getElementProp is deprecated since it actually only gets the attribute and not the prop. I know we'll need to refactor this at some point.
There was a problem hiding this comment.
Yeah, I remember. I'll submit a PR to rename it today, so it's not misleading when reading code.
| disabled={disabled} | ||
| key={key} | ||
| onClick={onClick} | ||
| tabIndex={-1} |
There was a problem hiding this comment.
Just confirming that clearing here only happens via mouse. A keyboard user would need to select all text and delete.
There was a problem hiding this comment.
Great point. I think I had it this way because of how it works in input, but Escape doesn't clear the value here. @ashetland WDYT?
There was a problem hiding this comment.
Synced up w/ @ashetland. Following input's example, the clear button won't be focusable and Escape will clear the value if the combobox is closed and focused.
jcfranco
added
pr ready for visual snapshots
jcfranco
added
pr ready for visual snapshots
jcfranco
removed
the
pr ready for visual snapshots
jcfranco
added
the
pr ready for visual snapshots
Related Issue: #4738, #3074
Summary
This updates the combobox to display a clear-value button by default and adds a
clearDisabledproperty to disable the clear-button. Additionally, this prevents single-selection from deselecting a value when clicked again making it similar tocalcite-select.Noteworthy changes
coerceparam fromcombobox-item#toggleSelectedas it's internal and isn't used.