Fix ResizeObserver loop error (#902)

This commit is contained in:
sua yoo 2023-05-30 14:59:34 -07:00 committed by GitHub
parent 6208ead040
commit ab518f51fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 3 deletions

View File

@ -76,7 +76,6 @@ export class Combobox extends LitElement {
<sl-popup
placement="bottom-start"
shift
sync="width"
strategy="fixed"
?active=${this.isActive}
@keydown=${this.onKeydown}
@ -147,6 +146,16 @@ export class Combobox extends LitElement {
private async openDropdown() {
this.isActive = true;
await this.combobox?.updateComplete;
// Manually sync dropdown width instead of using `sync="width"`
// to get around ResizeObserver loop error
if (this.anchor?.length && this.dropdown) {
const anchorWidth = this.anchor[0].clientWidth;
if (anchorWidth) {
this.dropdown.style.width = `${anchorWidth}px`;
}
}
this.dropdown?.classList.add("animateShow");
this.dropdown?.classList.remove("hidden");
}

View File

@ -294,7 +294,7 @@ export class CrawlsList extends LiteElement {
<div class="text-neutral-500 mx-2">${msg("View:")}</div>
<sl-select
id="stateSelect"
class="flex-1 md:min-w-[14.5rem]"
class="flex-1 md:w-[14.5rem]"
size="small"
pill
multiple
@ -321,7 +321,7 @@ export class CrawlsList extends LiteElement {
</div>
<div class="grow flex">
<sl-select
class="flex-1 md:min-w-[9.2rem]"
class="flex-1 md:w-[9.2rem]"
size="small"
pill
value=${this.orderBy.field}