feat: Ion-select allow clear selected option

[FranciskoNeves]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Clear selected option

Describe the Use Case

We have a form with a ion-select, with a list of options, and we select one of them.
After that selection the user should be able to unselect that option and leave the ion-select empty without workarounds.

Describe Preferred Solution

If we want to unselect that selected option, we should have a button/icon (trash or cross) like we have in ion-searchbar to unselect the option and leave the ion-select empty.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[sean-perkins]

Hello @FranciskoNeves thanks for the feature request!

Are there any native examples of a clear action in a dropdown/select that you could either provide screenshots for me or let me know which app/UI system has that? Initially, introducing a clear action seems like a simple feature implementation, but needing the ability to customize the icon and appearance of that clear action can quickly expand the scope.

Currently developers are able to implement a custom clear action with a little boilerplate: https://stackblitz.com/edit/angular-27nabc

I would prefer if we left this detail up to the developers (as long as it is a simple task to implement), unless we can find a native equivalent to reference.

[FranciskoNeves]

I already implemented a similar solution, just request for the feature because for me the ion-select without this feature is incomplete... But thanks for your answer.

[sean-perkins]

Hello @FranciskoNeves, I discussed with the team and at this time we do not have enough validation to support introducing this feature within our native design system.

Without a native design to compare against, we do not see a "one size fits all" solution, that does not have potential drawbacks to tap targets and user interaction with the select component. While this UX makes a lot of sense in a desktop environment, it is not a common pattern seen across native apps we commonly use or see in the marketplace.

Fortunately, if your application requires this pattern, the mock example to add support for it is minimal and can be adapted to fit the design constraints of your application.

I am going to close this feature request for now. If you can find a native app example that includes a clear action with a dropdown, we would be happy to take another look.

Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.