diff --git a/ts_web/elements/dees-input-multitoggle.ts b/ts_web/elements/dees-input-multitoggle.ts index bfb6794..35acde9 100644 --- a/ts_web/elements/dees-input-multitoggle.ts +++ b/ts_web/elements/dees-input-multitoggle.ts @@ -163,6 +163,14 @@ export class DeesInputMultitoggle extends DeesInputBase { // Initialize boolean options early if (this.type === 'boolean' && this.options.length === 0) { this.options = [this.booleanTrueName || 'true', this.booleanFalseName || 'false']; + // Set default selection for boolean if not set + if (!this.selectedOption) { + this.selectedOption = this.booleanFalseName || 'false'; + } + } + // Set default selection to first option if not set + if (!this.selectedOption && this.options.length > 0) { + this.selectedOption = this.options[0]; } } @@ -174,9 +182,17 @@ export class DeesInputMultitoggle extends DeesInputBase { } // Wait for the next frame to ensure DOM is fully rendered await this.updateComplete; - requestAnimationFrame(() => { - this.setIndicator(); - }); + + // Wait for fonts to load + if (document.fonts) { + await document.fonts.ready; + } + + // Wait one more frame after fonts are loaded + await new Promise(resolve => requestAnimationFrame(resolve)); + + // Now set the indicator + this.setIndicator(); } public async handleSelection(optionArg: string) {