carbon icon indicating copy to clipboard operation
carbon copied to clipboard

[Bug]: Search - clear button does not call `onChange` with proper event

Open gi opened this issue 2 years ago • 0 comments

Package

@carbon/react

Browser

Chrome

Package version

1.12.0

React version

18.2.0

Description

When clicking the close button after inputting text and clicking outside the component to trigger a blur/defocus event, the component is not collapsed even though the text input is empty.

In the Search component, when the Close button is clicked, clearInput is called. The event passed to the handler is for the button click.

When the Search component's value prop is undefined/null, then the onChange prop is called with the button click event.

When the Search component's value prop is defined, then the onChange prop is called with a modified event:

{
  ...event.target,
  target: { value: '' },
}

This event is not constructed properly and should either be a simple mock event:

{
  target: { value: '' }
}

or overwriting the value:

{
  ...event,
  target: {
    ...event.target,
    value: '',
  },
}

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-search--expandable

Steps to reproduce

https://react.carbondesignsystem.com/?path=/story/components-search--expandable

Code of Conduct

gi avatar Sep 22 '22 10:09 gi