Solving the Angular Material Issue: Option Selected Does Not Fire on Mouse Click

Описание: Learn how to effectively resolve the Angular Material issue where the option selected from an input chip does not fire when clicked. Improve user experience with practical solutions.
---
This video is based on the question https://stackoverflow.com/q/55930459/ asked by the user 'Arash' ( https://stackoverflow.com/u/4307552/ ) and on the answer https://stackoverflow.com/a/62411800/ provided by the user 'Lucia Cazorla Vicente' ( https://stackoverflow.com/u/13756992/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: angular material optionSelected does not fire when value in input field

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving the Angular Material Issue: Option Selected Does Not Fire on Mouse Click

If you’re working with Angular Material and using input chips with autocomplete options, you may encounter a frustrating problem: your option selected event doesn’t fire when a user clicks on an item in the dropdown. While entering options and selecting them with keyboard arrows works perfect, using the mouse click doesn’t trigger the desired action. In this post, we’ll explore why this happens and how to effectively solve the issue.

Understanding the Problem

Scenario Overview

Let's imagine you are building an interface that allows users to add modifiers using Angular Material’s input chips with autocomplete functionality. When a user begins typing (e.g., “we” for “western”), a dropdown appears with possible options. The expected behavior is that when the user clicks on one of the options (like “western”), the chip for that value should be created seamlessly without any additional prompts.

However, if a dialog is set to pop up when a user enters an option that does not yet exist, a click action may trigger that dialog, instead of creating the chip as intended. This leads to an inconsistent user experience: hitting enter after highlighting an option works but clicking does not.

Why Does This Happen?

The core of the issue lies in how Angular Material handles events from input chips and autocomplete components. The matChipInputTokenEnd event (which generally processes when a token is added) can conflict with click actions, especially when the add-on blur feature is enabled.

Solution: Change addOnBlur Setting

Recommended Approach

One effective solution to this issue, as discovered through community feedback, is to set the addOnBlur property in your input chip configuration to false. This adjustment often resolves the conflict and allows mouse clicks to work correctly, matching the behavior seen with keyboard interactions.

Implementation Steps

Locate Your Input Chip Configuration: Open the template file where your input chips are defined.

Modify the matChipInput Setting: Adjust the addOnBlur property. Here’s how your input chip declaration should look after the change:

[[See Video to Reveal this Text or Code Snippet]]

Test Your Implementation: After saving the changes, give your application a spin! The mouse click should now register the selected option correctly, mirrored by the keyboard input performance.

Final Thoughts

While encountering issues like the one we’ve discussed can be discouraging, solutions often lie within the configuration settings provided by Angular Material. By setting the addOnBlur property to false, you provide a smoother, more consistent experience for users interacting with your input chips.

If you continue to run into challenges or have ideas for further improving the user experience, don’t hesitate to share your insights with the community. Together, we can unlock new ways to enhance our Angular applications!