Fix possibly mis-measured text width in DatePicker (#320)

* Add containerElement to measureTextWidth function signature * Create a ref handler for the container element, and pass the element in
palantir · Dec 7, 2016 · 28a9d4b · 28a9d4b · blueprint-bot · Dec 7, 2016
1 parent 5e57a5e
commit 28a9d4b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/packages/datetime/src/common/utils.ts b/packages/datetime/src/common/utils.ts
@@ -9,12 +9,12 @@
  * Measure width of a string displayed with styles provided by `className`.
  * Should only be used if measuring can't be done with existing DOM elements.
  */
-export function measureTextWidth(text: string, className = "") {
+export function measureTextWidth(text: string, className = "", containerElement = document.body) {
     const span = document.createElement("span");
     span.classList.add(className);
     span.innerHTML = text;
 
-    document.body.appendChild(span);
+    containerElement.appendChild(span);
     const spanWidth = span.offsetWidth;
     span.remove();
 

diff --git a/packages/datetime/src/datePickerCaption.tsx b/packages/datetime/src/datePickerCaption.tsx
@@ -31,8 +31,9 @@ export class DatePickerCaption extends React.Component<IDatePickerCaptionProps,
     private displayedMonthText: string;
     private displayedYearText: string;
 
-    private monthArrow: HTMLElement;
-    private yearArrow: HTMLElement;
+    private containerElement: HTMLElement;
+    private monthArrowElement: HTMLElement;
+    private yearArrowElement: HTMLElement;
 
     public render() {
         const { date, locale, localeUtils, minDate, maxDate } = this.props;
@@ -62,7 +63,10 @@ export class DatePickerCaption extends React.Component<IDatePickerCaptionProps,
 
         const caretClasses = classNames("pt-icon-standard", "pt-icon-caret-down", Classes.DATEPICKER_CAPTION_CARET);
         return (
-            <div className={Classes.DATEPICKER_CAPTION}>
+            <div
+                className={Classes.DATEPICKER_CAPTION}
+                ref={this.containerRefHandler}
+            >
                 <div className={Classes.DATEPICKER_CAPTION_SELECT}>
                     <select
                         className={Classes.DATEPICKER_MONTH_SELECT}
@@ -101,16 +105,19 @@ export class DatePickerCaption extends React.Component<IDatePickerCaptionProps,
         this.positionArrows();
     }
 
-    private monthArrowRefHandler = (r: HTMLElement) => this.monthArrow = r;
-    private yearArrowRefHandler = (r: HTMLElement) => this.yearArrow = r;
+    private containerRefHandler = (r: HTMLElement) => this.containerElement = r;
+    private monthArrowRefHandler = (r: HTMLElement) => this.monthArrowElement = r;
+    private yearArrowRefHandler = (r: HTMLElement) => this.yearArrowElement = r;
 
     private positionArrows() {
+        // pass our container element to the measureTextWidth utility to ensure
+        // that we're measuring the width of text as sized within this component.
         const textClass = "pt-datepicker-caption-measure";
-        const monthWidth = Utils.measureTextWidth(this.displayedMonthText, textClass);
-        this.monthArrow.setAttribute("style", `left:${monthWidth}`);
+        const monthWidth = Utils.measureTextWidth(this.displayedMonthText, textClass, this.containerElement);
+        this.monthArrowElement.setAttribute("style", `left:${monthWidth}`);
 
-        const yearWidth = Utils.measureTextWidth(this.displayedYearText, textClass);
-        this.yearArrow.setAttribute("style", `left:${yearWidth}`);
+        const yearWidth = Utils.measureTextWidth(this.displayedYearText, textClass, this.containerElement);
+        this.yearArrowElement.setAttribute("style", `left:${yearWidth}`);
     }
 
     private handleMonthSelectChange = (e: React.FormEvent<HTMLSelectElement>) => {