diff options
| -rw-r--r-- | packages/instant/src/components/scaling_input.tsx | 8 | ||||
| -rw-r--r-- | packages/instant/src/style/fonts.ts | 4 |
2 files changed, 6 insertions, 6 deletions
diff --git a/packages/instant/src/components/scaling_input.tsx b/packages/instant/src/components/scaling_input.tsx index fadb3466b..6948c86c1 100644 --- a/packages/instant/src/components/scaling_input.tsx +++ b/packages/instant/src/components/scaling_input.tsx @@ -53,7 +53,7 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu public state = { inputWidthPxAtPhaseChange: undefined, }; - private readonly _inputRef = React.createRef(); + private readonly _inputRef = React.createRef<HTMLInputElement>(); public static getPhase(textLengthThreshold: number, value: string): ScalingInputPhase { if (value.length <= textLengthThreshold) { return ScalingInputPhase.FixedFontSize; @@ -101,8 +101,6 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu ): void { const prevPhase = ScalingInput.getPhaseFromProps(prevProps); const curPhase = ScalingInput.getPhaseFromProps(this.props); - const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase); - const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase); // if we went from anything else to end, fix to the current width as it shouldn't change as we grow if (prevPhase !== ScalingInputPhase.ScalingFontSize && curPhase === ScalingInputPhase.ScalingFontSize) { this.setState({ @@ -115,6 +113,8 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu inputWidthPxAtPhaseChange: undefined, }); } + const prevFontSize = ScalingInput.calculateFontSizeFromProps(prevProps, prevPhase); + const curFontSize = ScalingInput.calculateFontSizeFromProps(this.props, curPhase); // If font size has changed, notify. if (prevFontSize !== curFontSize) { this.props.onFontSizeChange(curFontSize); @@ -166,6 +166,6 @@ export class ScalingInput extends React.Component<ScalingInputProps, ScalingInpu if (!ref) { return 0; } - return (ref as any).getBoundingClientRect().width; + return ref.getBoundingClientRect().width; }; } diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts index f305fd612..92450502d 100644 --- a/packages/instant/src/style/fonts.ts +++ b/packages/instant/src/style/fonts.ts @@ -1,10 +1,10 @@ export const fonts = { include: () => { // Inject the inter-ui font into the page - const head = document.head || document.getElementsByTagName('head')[0]; + const appendTo = document.head || document.getElementsByTagName('head')[0] || document.body; const style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode(`@import url('https://rsms.me/inter/inter-ui.css')`)); - head.appendChild(style); + appendTo.appendChild(style); }, }; |