Очистить значок вместе с загрузкой значка при автозаполнении PrimeNG

Question

Я хотел бы настроить значок X на компоненте p-autocomplete, чтобы получить это:

Фаза загрузки предложений:

Закончены загрузки предложений:

Единственное, что я получаюпрямо сейчас это так:

Значок X не перемещается вправо, даже если значок загрузки основного файла не виден.Единственное, чего мне удалось добиться, это:

input[type="search"] {
  padding-right:0px!important;
}

Я знаю, что могу настроить значок X с помощью

input[type="search"]::-webkit-search-cancel-button {
  ...
}

Но я не знаю как.Любые предложения?

РЕДАКТИРОВАТЬ:

Вот как вы можете показать значок X:

<p-autocomplete ... [type]="'search'"></p-autocomplete>

Answer 1

Попробуйте добавить это в свой CSS:

i.ui-autocomplete-loader {
  margin: -44px;
}

Результат

См. StackBlitz