From 5ed6d5f8bfca1d4c1e4e16de04613803dbe2d380 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Mon, 16 Dec 2024 10:02:17 -0800 Subject: [PATCH] fix(date-picker): fix year-select width logic --- .../date-picker-month-header.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx index cbd453c400d..7151d1c589f 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx +++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx @@ -306,15 +306,20 @@ export class DatePickerMonthHeader extends LitElement { } private setYearSelectMenuWidth(): void { - if (!this.monthPickerEl.value) { + const el = this.monthPickerEl.value; + if (!el) { return; } - const fontStyle = getComputedStyle(this.monthPickerEl.value).font; - const localeMonths = this.localeData.months[this.monthStyle]; - const activeLocaleMonth = localeMonths[this.activeDate.getMonth()]; - const selectedOptionWidth = Math.ceil(getTextWidth(activeLocaleMonth, fontStyle)); - this.monthPickerEl.value.style.width = `${selectedOptionWidth + this.yearSelectWidthOffset}px`; + requestAnimationFrame(() => { + const computedStyle = getComputedStyle(el); + // we recreate the shorthand vs using computedStyle.font because browsers will return "" instead of the expected value + const shorthandFont = `${computedStyle.fontStyle} ${computedStyle.fontVariant} ${computedStyle.fontWeight} ${computedStyle.fontSize}/${computedStyle.lineHeight} ${computedStyle.fontFamily}`; + const localeMonths = this.localeData.months[this.monthStyle]; + const activeLocaleMonth = localeMonths[this.activeDate.getMonth()]; + const selectedOptionWidth = Math.ceil(getTextWidth(activeLocaleMonth, shorthandFont)); + el.style.width = `${selectedOptionWidth + this.yearSelectWidthOffset}px`; + }); } private isMonthInRange(index: number): boolean {