Angular 8 mat-select选值后下拉箭头未恢复向下状态问题

• 用:focus伪类判断下拉开合状态的逻辑本身存在缺陷：mat-select展开下拉面板后，焦点会转移到弹出层的选项容器上；选中选项后面板销毁，焦点回退到mat-select宿主元素的时机与面板关闭时机不同步，直接导致面板已经收起、但焦点状态未及时清除，箭头停留在旋转180度的状态，只有长按选项等焦点逻辑走完才会复位，和你遇到的异常表现完全一致。
• 原有:focus选择器未限定作用范围，会匹配页面所有获得焦点的元素，存在样式污染风险。
• 原有SCSS存在属性笔误：background-image: no-repeat !important;写法错误，no-repeat是background-repeat的属性值，这行代码不会实际生效。

Angular Material的mat-select组件本身已经在面板打开时，自动给宿主元素添加mat-select-panel-opened状态类，面板关闭时自动移除，这个类的状态和面板开合100%同步，覆盖所有关闭场景（选中选项关闭、点击外部关闭、按ESC关闭、再次点击触发元素关闭），不需要额外写TS监听事件、手动控制焦点，直接绑定这个类写样式即可。

修正后的完整SCSS代码如下：

::ng-deep .mat-select-arrow {
  /* 清除组件默认的边框箭头样式 */
  border-left: 15px solid transparent !important;
  border-right: none !important;
  border-top: 15px solid transparent !important;
  /* 自定义下拉箭头 修正原属性笔误 */
  background-image: url(../../assets/icons/Icon_dropdown_Arrow_bottom.svg) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;

  /* 箭头旋转动效 */
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

/* 仅在面板实际打开时触发箭头旋转 状态与组件原生行为完全对齐 */
::ng-deep .mat-select.mat-select-panel-opened .mat-select-arrow {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

注意事项 #

• 原有基于:focus写的箭头旋转样式需要完全删除，避免样式冲突和全局污染。
• 上述写法适配Angular 8版本的mat-select组件，无需依赖mat-form-field即可生效。
• 若需要调整动效节奏，直接修改transition属性的时长、缓动函数参数即可。

内容的提问来源于stack exchange，提问作者user10001050