bug(MatFormField): Outline form field with prefix labels misalign when the document direction is changed.

评估

调研方向

描述

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When the direction property on the document is changed (LTR to RTL and viceversa), outline form fields with a prefix suffer from label misalignment. This presents a problem for apps that have forms and need to support a location switcher that has a RTL language like Arabic.

Reproduction

StackBlitz link: https://stackblitz.com/edit/3rswucyt?file=src%2Fexample%2Fform-field-appearance-example.html
Steps to reproduce:

1. Observe button in default LTR mode.

3. Click the "Toggle dir" button to change the direction in the wrapper to RTL
4. Observe the label is now misaligned, trailing off to the right.

5. Click the "Rerender" button to remove the form from the dom for one second
6. Observe that when the component re-renders, the label alignment is correct.

7. Click the "Toggle dir" button again to set the direction back to LTR
8. Observe the label is misaligned again, only fixes when re-rendering the button.

Expected Behavior

When changing the direction, the label alignment should react and adjust.

Actual Behavior

The label is not aligning, it seems that it has the calculation obtained from before the direction changed. Since re-rendering the component fixes the problem, it appears that the logic is inside the component, but there is no way to notify the component a re-calculation is needed.

Environment

• Angular: 22.1.0
• CDK/Material: 22.1.0
• Browser(s): Google Chrome, Microsoft Edge, Safari
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

贡献指南

打开贡献指南

从这里开始

1. 先读完整个 Issue，再读项目的贡献指南。
2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
3. Fork 仓库，在一个分支上完成修改。
4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

angular/components 的其他 Issue

• docs-bug(tree): Test classes and interfaces do not render 未关闭
  area: material/tree docs gemini-triaged needs triage

  难度 2/5 1-3 小时 新手友好度 68/100

  angular/components#33832 · 2026年9月17日 创建

• bug(mat-date-picker): month shown twice in date picker 未关闭
  area: material/datepicker gemini-triaged P4

  难度 2/5 1-3 小时 新手友好度 72/100

  angular/components#33763 · 2 条评论 · 3 个 reaction · 2026年9月2日 创建

• Bug in table.scss footer cell height: unset instead of footer row height unset 未关闭
  area: material/table gemini-triaged P4

  难度 1/5 1 小时以内 新手友好度 88/100

  angular/components#33709 · 1 条评论 · 2026年8月21日 创建

• docs-bug(Table): Add example with `rowspan` 未关闭
  area: material/table docs gemini-triaged P4

  难度 2/5 1-3 小时 新手友好度 72/100

  angular/components#33455 · 2026年6月27日 创建

• bug(date-adapter): Misleading JSDoc for createDate returns type 未关闭
  area: material/core gemini-triaged P3

  难度 1/5 1 小时以内 新手友好度 78/100

  angular/components#33059 · 2 条评论 · 2026年4月9日 创建

查看 angular/components 的全部 Issue

相似的 Issue

• sortNodePosition throws when a sibling in enteringChildren has not mounted yet (Firefox: compareDocumentPosition: Argument 1 is not an object) 未关闭

  难度 1/5 1-3 小时 新手友好度 88/100

  motiondivision/motion#3849 · 2026年9月25日 创建

• Add: S Play Event HD 未关闭
  check:passed streams:add

  难度 2/5 1-3 小时 新手友好度 72/100

  iptv-org/iptv#52752 · 2026年9月25日 创建

• Improvement for contact popover 未关闭

  难度 2/5 1-3 小时 新手友好度 68/100

  linagora/twake-ui#111 · 2026年9月25日 创建

• LiteLLM proxy response_cost (x-litellm-response-cost) is never applied to ChatModelOutput.cost 未关闭
  bug

  难度 2/5 1-3 小时 新手友好度 84/100

  i-am-bee/beeai-framework#1697 · 1 个 reaction · 2026年9月25日 创建

• Support bun dedupe 未关闭
  enhancement

  难度 2/5 1-3 小时 新手友好度 75/100

  antfu/node-modules-inspector#214 · 2026年9月25日 创建

更多 TypeScript Issue