Interactive list items in RTL get pushed to the left

[amsheehan]

What MDC-Web Version are you using?

0.11.0

What browser(s) is this bug affecting?

Chrome

What OS are you using?

macOS 10.12.4

What are the steps to reproduce the bug?

1. open demo
2. click toggle RTL button

What is the expected behavior?

Margins and padding would be the same but reversed horizontally in RTL contexts

What is the actual behavior?

lists are pushed to the left in RTL

Any other information you believe would be useful?

LTR

RTL

[robzenn92]

It seems to be caused by mdc-list-item.mdc-ripple-upgraded and in particular by line 164 and line 166.

In fact if we remove both, the behavior is the same as the LTR context.

[traviskaufman]

@robzenn92 correct!

Marking this as help wanted.

The offending code is https://github.com/material-components/material-components-web/blob/master/packages/mdc-list/mdc-list.scss#L164 and can be fixed by using mdc-rtl-reflexive-position

• Change L164 to @include mdc-rtl-reflexive-position(left, $mdc-list-side-padding * -1);