Clear ('x') icon doesn't fire _change event on goa-input

DarylChiew commented 2 years ago

Describe the bug

When using the <goa-input> web component, after typing in 1 or more characters, hovering over the input displays a clear button in the right side of the input box.

Clicking on the 'x' clears the text, but the _changeevent on the goa-input control is not fired.

What is the level of criticality

Medium - One of the other input events can be hooked into, but then I can't make use of the _changeevent since both events will get fired.

To Reproduce (include pictures or video if helpful)

Steps to reproduce the behaviour:

Create an angular project (although I'm sure any web project that can integrate the web components will work).

Use something similar to the following html:

<goa-input leadingicon="search" type="search" placeholder="Search for an item"
(_change)="onSearchChange($event)"
></goa-input>

Implement the onSearchChangeevent handler. Add console.log(...) to help with debugging.
Run the app and note that the onSearchChangeevent handler is fired when text is entered but is not fired when the 'x' is clicked.

Expected behaviour

When the 'x' icon is clicked in the input control, the text box should be cleared and the _change event fired to indicate the text box is now empty.

System configuration

Desktop (please complete the following information):

OS: Windows 10
Browser: Chrome, v99.0.4844.74
@abgov/web-components: v1.0.0-alpha.23

Duplicate of: https://github.com/GovAlta/ui-components/issues/658

Spark450 commented 2 years ago

@DarylChiew are you able to handle _trailingIconClick event and clear the attributes value manually?

DarylChiew commented 2 years ago

@Spark450 it does work that way, but using type="search" causes 2 'x's to show up.

Workaround was to use type='text' and . Should search be removed? Or are there still plans for this type?

Spark450 commented 2 years ago

@Spark450 it does work that way, but using type="search" causes 2 'x's to show up.

Workaround was to use type='text' and . Should search be removed? Or are there still plans for this type?

@chrisolsen are you able to reproduce this on your end and investigate further? I think the "black x" should show and blue one should not (from a visual perspective)