select: dropdown box is cut off and locate out of the screen in RTL view on mobile/iPad

[frkfir]

AngularJS Material is in LTS mode

We are no longer accepting changes that are not critical bug fixes into this project. See Long Term Support for more detail.

Bug Report

md-select dropdown box is cut off and locate out of the screen in RTL view on mobile/iPad. In the previous versions, this bug hasn't appeared.

Demo and steps to reproduce the issue

Open md-select drop down on LTR and then change the view to RTL, the list box appears at the edge of the page and cut off. Also when the text is a little bit long from the example on the Angular JS material documentation, the text also cuts off.

This blank StackBlitz demo can be used to create a reproduction that demonstrates your issue.

**Demo URL (required)***:

Detailed Reproduction Steps

Explain the expected behavior

The expected behavior should be the same as LTR view.

Explain the current behavior

The current behavior isn't like LTR view and the list box is cut off (also the text inside each md-option)

Discuss the use-case or motivation for changing the existing behavior

It is important to fix this problem as it is a regression to something that has worked well in the past and there are quite a few customers with RTL languages who need this solution.

List the affected versions of AngularJS, Material, OS, and browsers

• AngularJS: 1.6.10
• AngularJS Material: 1.1.26
• OS: Windows
• Browsers: Chrome, FF, Edge, Safari
• Screen Readers: NVDA, JAWS

Add anything else we should know

Stack Trace

Screenshots

On LTR view:

On RTL view:

[Splaktar]

• Please provide a CodePen, StackBlitz, or GItHub reproduction and reproduction steps.
• Also please provide the version of AngularJS Material where this functionality worked properly so that we can verify the regression categorization.

We need this information to look into this issue further.

[frkfir]

• For the demo:
  1. just even use the Chrome emulator for mobile (I used Galaxy S5 view) and add the HTML tag dir="rtl" .
  2. Go to 1.1.23 AngularJS Material version.
  3. Go to "Demos" --> Select.
  4. Go to the second example "Option Groups" with the first dropdown (Size).
• The version of AngularJS Material where this functionality worked properly is 1.1.22 and in science 1.1.23 this issue appears. Thanks!