material-components / material-components/material-web
md-filter-chip: remove event and its usability
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 11.3k
- Forks
- 1.1k
- Avg merge
- 20h 28m
- Merged PRs (30d)
- 13
Description
Description
Hi, first of all, thanks a lot for fixing #4951 . During the last few days I have been upgrading my client websites' with the new material components and today I stumpled upon this scenario with <md-filter-chip> (and <md-input-chip> as well).
Right now the documentation does not mention any event at all which is not really helpful if you want to know when a chip get removed. I see it can be fixed with additional annotation:
* @fires remove Fired once the chip is removed
However, another issue is when remove is fired, the actual chip is not removed yet. This causes very awkward code when handling the event where you have to consider that possibility, for example, when getting values from the children, you have to keep a reference to the chip that is being removed:
#onChipRemoved() {
// The removed chip is not removed yet at this time
if (this.#lstSplitTimes.children.length <= 1) {
this.#lstSplitTimes.append(this.#lblNoSplit);
}
// Code for getting values from children is impossible here without keeping a reference to the
// chip that fired this event
}
I understand you should not remove it yet because the user can cancel it using preventDefault. My suggestion is to give us another event, like removed so we can simply handle it if we don't care about cancelling:
function handleRemoveClick(this: Chip, event: Event) {
if (this.disabled) {
return;
}
event.stopPropagation();
const preventDefault =
!this.dispatchEvent(new Event('remove', {cancelable: true}));
if (preventDefault) {
return;
}
this.remove();
// Add this:
this.dispatchEvent(new Event('removed'));
}
P.s. I know it's discussed before but I still wish the events bubble, or at least re-dispatched by the <md-chip-set> so I don't have to add event handlers to each <md-...-chip> 😅
Browser/OS Environment
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inspecting the remove handling and event documentation for and . Compare the current cancellable remove behavior with the requested post-removal event and bubbling or chip-set handling; done requires an agreed event API and corresponding behavior and documentation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100