Angular使用@flxng/mentions在安卓Chrome无法弹出自动建议如何解决

1. 开启合成事件兼容配置 #

flxng mentions内置了适配移动端软键盘输入逻辑的配置项，用于处理安卓端拼音输入、联想输入触发的合成事件流，直接在组件配置中添加对应参数即可：

// 提及功能配置项
mentionsConfig = {
  // 保留原有其他配置，比如触发字符、列表数据等
  triggerChar: '@',
  handleCompositionEvents: true, // 新增合成事件处理开关
};

2. 屏蔽输入法默认行为干扰 #

安卓Chrome的拼写矫正、自动联想功能会截断输入框的原生事件流，给绑定提及功能的输入/文本框添加以下属性规避冲突：

<textarea 
  flxMentions 
  [config]="mentionsConfig"
  autocomplete="off"
  autocorrect="off"
  spellcheck="false"
  inputmode="text"
></textarea>

3. 手动触发兜底逻辑 #

如果上述配置未生效，可以手动监听输入事件，检测到输入触发字符@时主动唤起建议列表：

// 组件逻辑
import { MentionDirective } from '@flxng/mentions';

@ViewChild(MentionDirective) mentionDirective: MentionDirective;

onInput(e: Event): void {
  const inputEl = e.target as HTMLInputElement;
  const cursorPos = inputEl.selectionStart;
  const lastInputChar = inputEl.value.slice(cursorPos - 1, cursorPos);
  if (lastInputChar === '@') {
    setTimeout(() => {
      this.mentionDirective.openSuggestions();
    }, 0);
  }
}

<!-- 模板绑定输入事件 -->
<textarea 
  flxMentions 
  [config]="mentionsConfig"
  (input)="onInput($event)"
  autocomplete="off"
  autocorrect="off"
  spellcheck="false"
></textarea>

内容的提问来源于stack exchange，提问作者kk-at-cbx