angular / angular/components

[Snackbar] Not visible if keyboard is displayed (touch devices)

Open
#8,965 5 comments 2 reactions 0 assignees View on GitHub
area: material/snack-bar P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug:
Snackbar is hidden when the virtual keyboard is opened.
Tested on iOS 11

#### What is the expected behavior?
Snackbar is placed on the bottom of visible screen, above keyboard

#### What is the current behavior?
Snackbar is placed on behind keyboard, not visible

#### What are the steps to reproduce?
Stackblitz Editor: https://stackblitz.com/edit/angular-material2-issue-brodsj

0. Open https://angular-material2-issue-brodsj.stackblitz.io on a touchscreen device with virtual
keyboard.

Case 1:
1. Tap "Open snackbar" link
2. Keyboard is displayed hidding the snackbar

Case 2:
1. Tap "Open same snackbar" button -> The snackbar is displayed and visible
2. Tap "The placeholder" input field -> Keyboard is displayed hidding the snackbar

#### What is the use-case or motivation for changing an existing behavior?
We want to notify the user from some action AND request immediate input.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 5+

#### Is there anything else we should know?
Tested on iOS11, Safari

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz Editor reproduction and verify both snackbar cases on an iOS 11 Safari touchscreen with the virtual keyboard open. Trace the Angular Material Snackbar implementation from the reproduction, then confirm the snackbar remains visible at the bottom of the visible screen above the keyboard.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.