question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature request: expose ion-searchbar focus/blur events

See original GitHub issue

Ionic version: (check one with “x”) [ ] 1.x [ ] 2.x [ + ] 3.x

I’m submitting a … (check one with “x”) [ ] bug report [ + ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Currently only the “ionInput” output event is exposed, which is used to detect when the content of the searchbar changes. However, there are cases where you’d want to catch the focus and blur events and execute some custom action in your app. Using Angular’s (blur) and (focus) does nothing because internally those events are already intercepted.

Expected behavior: Being able to provide custom functionality on blur and focus of ion-searchbar, same as one can do that for ionInput event.

Steps to reproduce: Example use-case: I am using searchbar for the Google Places autocomplete together with a native Google Maps from @ionic-native. I need to be able to detect focus and blur events for ion-searchbar because I have to disable / enable the map taps based on whether the searchbar is in focus or not (otherwise all clicks on the Google Places suggestions dropdown get hijacked by the map).

Also, there was a question about the blur/focus detection on StackOverflow: http://stackoverflow.com/questions/43756290/how-to-detect-onfocus-and-blur-event-of-ion-searchbar-in-ionic2

Ionic info:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.6
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

7reactions
manucorporatcommented, May 15, 2017

ionBlur and ionFocus is already exposed, just use:

<ion-searchbar (ionBlur)="blur()" (ionFocus)="focus()">

am I missing something here? please, reopen if that didn’t work

3reactions
hayukicommented, May 15, 2017

@manucorporat that does indeed work, my bad. You can happily close the pull request 😃 However, it would be useful if you could add this into the docs somewhere, then there would be fewer cases of confusion similar to mine…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Feature request: expose ion-searchbar focus/blur events ...
Current behavior: Currently only the "ionInput" output event is exposed, which is used to detect when the content of the searchbar changes.
Read more >
How to detect onfocus and blur event of ion-searchbar in ...
I want to detect when the searchbar input get focus and when it blur so that I can hide or show some components...
Read more >
<ion-searchbar> keeps focus while scrolling - Ionic Forum
I'm running Ionic 2 and I'm using the directive for a searchbar. I tap on it and start typing stuff in and it...
Read more >
@ionic/angular | Yarn - Package Manager
Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase ......
Read more >
User Guide
such as red eye reduction, crop, sharpen, blur, and photo repair to enhance or correct your images. Image editing tools, such as exposure...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found