Input Chips - Setting a removal URL on the Trailing Icon

[thekvd]

Not sure if this is a thing already and I'm missing it, so I'm asking first.

I want to use the Input Chips on this build that uses a generated url to remove it. I can add an href to the md-input-chip and that works ok. Click the Chip, it goes away, URL changes removing the filter.

The only problem is: If you click the Trailing Icon "x" on the Chip, it disappears but doesn't change the URL, thus not removing the filter.

Is there a way currently to target only the Trailing Icon with the link I need?

As a workaround, is there a way to disable the Trailing Icon or get it to also fire the same link?

I'm building a new store theme for a client in Shopify. Everything has gone pretty great so far!

EDIT: I'll add that using "remove-only" has no effect on this use case. Don't know if it should, but figured any info is helpful.

EDIT 2: The reason I'm using Input and not Filter Chips is because I'm showing what filters have been applied by the user. When the filter is applied from it's slider/select/etc. then an Input Chip shows up in the Chip Set saying what category and value was applied. They need to do 2 things in this use case: Show what filter was applied and Remove the filter when the X is clicked. Filter Chips also add a select function that I don't want.

Example: User uses a Slider to select a Price Range to filter a Product List. Chip shows up saying "Price: $5 - $15". User clicks the X icon on the chip to remove it. The filter is removed, Chip disappears, Chip Set is empty.

[asyncLiz]

You can add a 'remove' event listener directly to the input chips and call event.preventDefault() to stop the default removal behavior.

chip.addEventListener('remove', event => event.preventDefault());

[thekvd]

That does stop the Trailing Icon from removing the chip. It is better than removing it visually only, but not ideal because the one part of the chip that the user would expect to work doesn't even though it gives all the visuals of being clicked.

Functional as a workaround for sure. Thank you for that!

[thekvd]

Leaving this for anyone who may need it before the fix:
An alternative option to using preventDefault() would be window.location.href = e.target.getAttribute('href');. I'm using these to remove URL filters so this at least lets me pull the link from the parent md-input-chip without knowing it ahead of time.