ionic-team / ionic-team/ionic-framework
feat(searchbar): collapse on focus
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 51
Description
# Feature Request
**Ionic version:**
[x] **4.x**
**Describe the Feature Request**
In native IOS apps such as settings, photos or reminders, the searchbar is animated when is focused.
- When focused, the header is minimized so that the toolbar is at the top. Components that are above the search bar, such as title or buttons, disappear [step 2].
- while focusing, there is an animation of the cancel button from right to left (Reminder app animation example).
- Furthermore, the content is not scrollable while the searchbar is focused.
- While focused and nothing is typed, there is a backdrop on content.
- If something was typed, the content can be edited again and the backdrop disappears [step 3].
## Settings app example:

## Reminder app animation example:
- [Link to video](https://i.imgur.com/6tFq90O.mp4)
**Describe Preferred Solution**
The ion-searchbar could be extended by further input parameters:
- `collapse: boolean`
- if true, the slide to top animation is executed.
- `backdrop: boolean`
- backdrop on content will be applied, when focused.
Contributor guide
Assessment
This issue has not been assessed yet.