feat(searchbar): collapse on focus

[DwieDima]

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

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.

[pritamsoni-hsr]

@DwieDima did you manage to create this one by yourself?

[DwieDima]

@pritamsoni-hsr sorry for late response, but no. Hope this is someday part of the ionic framework 😄