mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
fix(bidi): handle uppercase values correctly (#14773)
The native `dir` attribute is case-insensitive, however our `dir` directive will normalize something like `RTL` to `ltr`. These changes account for different cases of the values.
This commit is contained in:
committed by
Jeremy Elbourn
parent
b98eb0307b
commit
6ea0e96d2e
+2
-1
@@ -47,9 +47,10 @@ export class Dir implements Directionality, AfterContentInit, OnDestroy {
|
||||
get dir(): Direction { return this._dir; }
|
||||
set dir(value: Direction) {
|
||||
const old = this._dir;
|
||||
const normalizedValue = value ? value.toLowerCase() : value;
|
||||
|
||||
this._rawDir = value;
|
||||
this._dir = (value === 'ltr' || value === 'rtl') ? value : 'ltr';
|
||||
this._dir = (normalizedValue === 'ltr' || normalizedValue === 'rtl') ? normalizedValue : 'ltr';
|
||||
|
||||
if (old !== this._dir && this._isInitialized) {
|
||||
this.change.emit(this._dir);
|
||||
|
||||
@@ -11,7 +11,12 @@ describe('Directionality', () => {
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
imports: [BidiModule],
|
||||
declarations: [ElementWithDir, ElementWithPredefinedAutoDir, InjectsDirectionality],
|
||||
declarations: [
|
||||
ElementWithDir,
|
||||
ElementWithPredefinedAutoDir,
|
||||
InjectsDirectionality,
|
||||
ElementWithPredefinedUppercaseDir,
|
||||
],
|
||||
providers: [{provide: DIR_DOCUMENT, useFactory: () => fakeDocument}],
|
||||
}).compileComponents();
|
||||
}));
|
||||
@@ -134,6 +139,13 @@ describe('Directionality', () => {
|
||||
expect(fixture.componentInstance.dir.value).toBe('ltr');
|
||||
});
|
||||
|
||||
it('should be case-insensitive', () => {
|
||||
const fixture = TestBed.createComponent(ElementWithPredefinedUppercaseDir);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.componentInstance.dir.value).toBe('rtl');
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
@@ -158,6 +170,14 @@ class ElementWithPredefinedAutoDir {
|
||||
@ViewChild(Dir) dir: Dir;
|
||||
}
|
||||
|
||||
@Component({
|
||||
template: '<div dir="RTL"></div>'
|
||||
})
|
||||
class ElementWithPredefinedUppercaseDir {
|
||||
@ViewChild(Dir) dir: Dir;
|
||||
}
|
||||
|
||||
|
||||
/** Test component with Dir directive. */
|
||||
@Component({
|
||||
selector: 'injects-directionality',
|
||||
|
||||
Reference in New Issue
Block a user