material-components / material-components/material-web

md-filter-chip: remove event and its usability

Open
#5,118 3 comments 1 reaction 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.