如何解决用作下拉菜单的 Mat Input 随 Firefox 中的下拉菜单一起扩展
openPanel(id: string,index: number,listId: string): void {
document.getElementById(id + index).click();
document.getElementById(listId).style.display = 'block';
}
@-moz-document url-prefix() {
:focus {
width: 320px !important;
}
}
<input
type="text"
name="code{{ i }}"
id="code{{ i }}"
aria-label="Number"
matInput
list="jobCodesList"
[formControl]="element.get('code')"
(focus)="openPanel('code',i,'jobCodesList')"
(blur)="setFirstItem(element);closePanel('jobCodesList');"
(keyup.enter)="setFirstItem(element)"
(keydown.Tab)="setFirstItem(element)"
[ngClass]="{
'form-error':
element.get('code').touched && element.get('code').invalid
}"
/>
<datalist id="jobCodesList">
<select class="datalist">
<option *ngFor="let option of jobCodesFiltered" [value]="option.code">
{{ option.code + ' - ' + option.description }}
</option>
</select>
</datalist>
//Due to matinput with dropdown id "jobCodesList" acting as : when click on input dropdown width is increased and also input width is increased in firefox
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。