Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why is there no way to dismiss the keyboard in the search bar? #30317

Open
tzdevelopteam opened this issue Mar 26, 2025 · 2 comments
Open

Why is there no way to dismiss the keyboard in the search bar? #30317

tzdevelopteam opened this issue Mar 26, 2025 · 2 comments
Labels

Comments

@tzdevelopteam
Copy link

When using the search bar, the keyboard pops up while typing, and results are displayed below. However, after the results load, the entire screen is filled with them, and there seems to be no way to dismiss the keyboard except by tapping on the header.

Wouldn't it be more intuitive to allow dismissing the keyboard more easily? Also, there's an option to add a "Cancel" button, but it seems unnecessary since an clear-button can be configured. Why not make this button simply close the keyboard instead of serving as a redundant cancel action?

Would it be possible to add an easier way to dismiss the keyboard?

@ionitron-bot ionitron-bot bot added the triage label Mar 26, 2025
@yokuze
Copy link

yokuze commented Apr 3, 2025

When using the search bar, the keyboard pops up while typing, and results are displayed below. However, after the results load, the entire screen is filled with them, and there seems to be no way to dismiss the keyboard except by tapping on the header.

Wouldn't it be more intuitive to allow dismissing the keyboard more easily? Also, there's an option to add a "Cancel" button, but it seems unnecessary since an clear-button can be configured. Why not make this button simply close the keyboard instead of serving as a redundant cancel action?

Would it be possible to add an easier way to dismiss the keyboard?

There's an existing method on ion-searchbar to get a reference to the native input: https://ionicframework.com/docs/api/searchbar#getinputelement

Once you have that, dismissing the keyboard is just a call .blur(): https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur

@yokuze
Copy link

yokuze commented Apr 3, 2025

Also, there's an option to add a "Cancel" button, but it seems unnecessary since an clear-button can be configured. Why not make this button simply close the keyboard instead of serving as a redundant cancel action?

The cancel and clear buttons have two different behaviors for two different use cases:

  1. Clear: "I want to search, but there's already text in the searchbar. I've already focused the input and want to clear out the existing text and keep searching." <-- Keeps the keyboard/focus, because that's part of the users's workflow
  2. Cancel: "I'm done searching and want to stop." <-- Dismisses the keyboard/focus, because the user is done searching

Even the positioning/placement of those two buttons (one inside the input, one outside) is part of that. Personally, I don't think that's redundant and wouldn't want to lose that API.

With the blur() method outlined above, I'd say we have the control we need.

I'm sympathetic if Ionic chooses not to make a "dismiss keyboard" a first-class method. That would be taking on ownership of making such a thing work consistently cross-browser. Providing a handle to the native input is good, because then they can spend that time doing other things like making more components and fixing bugs :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants