diff --git a/lit_nlp/client/elements/table.ts b/lit_nlp/client/elements/table.ts index 817ee476..009119f7 100644 --- a/lit_nlp/client/elements/table.ts +++ b/lit_nlp/client/elements/table.ts @@ -648,8 +648,13 @@ export class DataTable extends ReactiveElement { // clang-format on } + private columnNameToId(name: string) { + return name.replace(/\s+/g, ''); + } + renderColumnHeader(header: ColumnHeader) { const title = header.name; + const headerId = this.columnNameToId(title); const handleBackgroundClick = (e: Event) => { this.resetView(); @@ -705,7 +710,8 @@ export class DataTable extends ReactiveElement { // Focus cursor on newly-shown input box. if (this.showColumnMenu) { window.requestAnimationFrame(() => { - const inputElem = this.shadowRoot!.querySelector(`th#${title} .togglable-menu-holder input`) as HTMLElement; + const inputElem = this.shadowRoot!.querySelector( + `th#${headerId} .togglable-menu-holder input`) as HTMLElement; inputElem.focus(); }); } @@ -738,7 +744,7 @@ export class DataTable extends ReactiveElement { // clang-format off return html` - +
${header.html!}
diff --git a/lit_nlp/client/modules/multilabel_module.ts b/lit_nlp/client/modules/multilabel_module.ts index 99da248f..c1904bc2 100644 --- a/lit_nlp/client/modules/multilabel_module.ts +++ b/lit_nlp/client/modules/multilabel_module.ts @@ -235,6 +235,7 @@ export class MultilabelModule extends LitModule {
`; }