用作下拉菜单的 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 (将#修改为@）