`SearchControl` always shows the `close` icon when `onClose` prop is set

[Sidsector9]

Description

The SearchControl component has an icon suffix to show a magnifying lens or the close icon conditionally.
But when the onClose prop is set, the lens icon is never shown, and the close icon is always shown.

Step-by-step reproduction instructions

<SearchControl
    value={ text }
    onChange={ setText }
    onClose={ () => {} } // comment and uncomment this line to observe the bug.
/>

Expected behavior

1. When onClose is not set, the search icon should be always shown (for empty and non-empty field)
2. When onClose is set, then the close icon should be shown when the field is not empty, and search icon should be shown when the field is empty.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[mirka]

I think we can deduce from the code and the docs that this behavior is intentional. The close button in this case is not just for clearing the input, it is for actually "closing" (hiding, unmounting, whatever) the entire search field. That means the button needs to be available even when the input is empty.

When an onClose callback is provided, the search control will render a close button that will trigger the given callback.

Use this if you want the button to trigger your own logic to close the search field entirely, rather than just clearing the input value.

gutenberg/packages/components/src/search-control/index.tsx

Line 43 in 8a7df39

label={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }

Unfortunately we don't seem to have any actual usages of this prop in the Gutenberg app anymore, so we don't have examples.

@Sidsector9 Is there anything specific you wanted to achieve with the onClose prop, that requires the close button to be hidden when the input is empty?

[mirka]

I'm actually going to propose that we deprecate this prop (#65334) 🤔

[Sidsector9]

@mirka sorry for the delay.

I should have read the doc carefully because I clearly missed this part: "rather than just clearing the input value."

It is confusing though. This was reported to me by another user using our plugin which has a SearchControl.

[mirka]

I agree that it's confusing, and for probably no reason at this point!