@instructure/ui-text-input 8.23.1-snapshot.7 → 8.24.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.24.0](https://github.com/instructure/instructure-ui/compare/v8.23.0...v8.24.0) (2022-04-26)
+
+### Bug Fixes
+
+- **ui-text-input:** fix empty TextInput before/after elements having padding ([a5786c9](https://github.com/instructure/instructure-ui/commit/a5786c9083448dc1d7d8b5eecac11788c8b26fec))
+
 # [8.23.0](https://github.com/instructure/instructure-ui/compare/v8.22.0...v8.23.0) (2022-04-07)
 
 **Note:** Version bump only for package @instructure/ui-text-input

package/es/TextInput/index.js

@@ -50,6 +50,8 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     super(props);
     this.ref = null;
     this._input = null;
+    this._beforeElement = null;
+    this._afterElement = null;
     this._defaultId = void 0;
     this._messagesId = void 0;
     this._focusListener = null;
@@ -65,10 +67,16 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
 
     this.makeStyleProps = () => {
       const interaction = this.interaction;
+      const _this$state = this.state,
+            hasFocus = _this$state.hasFocus,
+            beforeElementHasWidth = _this$state.beforeElementHasWidth,
+            afterElementHasWidth = _this$state.afterElementHasWidth;
       return {
         disabled: interaction === 'disabled',
         invalid: this.invalid,
-        focused: this.state.hasFocus
+        focused: hasFocus,
+        beforeElementHasWidth,
+        afterElementHasWidth
       };
     };
 
@@ -107,7 +115,9 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     };
 
     this.state = {
-      hasFocus: false
+      hasFocus: false,
+      beforeElementHasWidth: void 0,
+      afterElementHasWidth: void 0
     };
     this._defaultId = props.deterministicId();
     this._messagesId = props.deterministicId('TextInput-messages');
@@ -116,11 +126,15 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
-
     if (this._input) {
       this._focusListener = addEventListener(this._input, 'focus', this.handleFocus);
+      this.setState({
+        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement),
+        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+      });
     }
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
   componentWillUnmount() {
@@ -129,9 +143,21 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
 
+    if (prevProps.renderBeforeInput !== this.props.renderBeforeInput) {
+      this.setState({
+        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement)
+      });
+    }
+
+    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
+      this.setState({
+        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+      });
+    }
+
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
@@ -217,6 +243,19 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     }));
   }
 
+  getElementHasWidth(element) {
+    if (!element) {
+      return void 0;
+    }
+
+    const computedStyle = getComputedStyle(element);
+    const width = computedStyle.width,
+          paddingInlineStart = computedStyle.paddingInlineStart,
+          paddingInlineEnd = computedStyle.paddingInlineEnd;
+    const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
+    return elementWidth > 0;
+  }
+
   render() {
     const _this$props4 = this.props,
           width = _this$props4.width,
@@ -227,9 +266,9 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
           messages = _this$props4.messages,
           inputContainerRef = _this$props4.inputContainerRef,
           styles = _this$props4.styles;
-    const hasBeforeElement = renderBeforeInput && callRenderProp(renderBeforeInput);
-    const hasAfterElement = renderAfterInput && callRenderProp(renderAfterInput);
-    const renderBeforeOrAfter = hasBeforeElement || hasAfterElement;
+    const beforeElement = renderBeforeInput ? callRenderProp(renderBeforeInput) : null;
+    const afterElement = renderAfterInput ? callRenderProp(renderAfterInput) : null;
+    const renderBeforeOrAfter = !!beforeElement || !!afterElement;
     return jsx(FormField, {
       id: this.id,
       label: callRenderProp(renderLabel),
@@ -244,17 +283,23 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       css: styles === null || styles === void 0 ? void 0 : styles.facade
     }, renderBeforeOrAfter ? jsx("div", null, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.layout
-    }, hasBeforeElement && jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.beforeElement
-    }, callRenderProp(renderBeforeInput)), jsx("span", {
+    }, beforeElement && jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.beforeElement,
+      ref: e => {
+        this._beforeElement = e;
+      }
+    }, beforeElement), jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
     }, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.inputLayout
     }, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
-    }, this.renderInput()), hasAfterElement && jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.afterElement
-    }, callRenderProp(renderAfterInput)))))) :
+    }, this.renderInput()), afterElement && jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
+      ref: e => {
+        this._afterElement = e;
+      }
+    }, afterElement))))) :
     /* If no prepended or appended content, don't render Flex layout */
     this.renderInput()));
   }

package/es/TextInput/styles.js

@@ -38,7 +38,9 @@ const generateStyle = (componentTheme, props, state) => {
         shouldNotWrap = props.shouldNotWrap;
   const disabled = state.disabled,
         invalid = state.invalid,
-        focused = state.focused;
+        focused = state.focused,
+        beforeElementHasWidth = state.beforeElementHasWidth,
+        afterElementHasWidth = state.afterElementHasWidth;
   const sizeVariants = {
     small: {
       fontSize: componentTheme.smallFontSize,
@@ -120,7 +122,6 @@ const generateStyle = (componentTheme, props, state) => {
     flexDirection: 'row'
   };
   const flexItemBase = { ...viewBase,
-    minWidth: '0.0625rem',
     flexShrink: 0
   };
   return {
@@ -168,11 +169,17 @@ const generateStyle = (componentTheme, props, state) => {
     beforeElement: {
       label: 'textInput__beforeElement',
       ...flexItemBase,
-      paddingInlineStart: componentTheme.padding
+      paddingInlineStart: componentTheme.padding,
+      // we only override the padding once the width is calculated,
+      // it needs the padding on render
+      ...(beforeElementHasWidth === false && {
+        paddingInlineStart: 0
+      })
     },
     innerWrapper: {
       label: 'textInput__innerWrapper',
       ...flexItemBase,
+      minWidth: '0.0625rem',
       flexShrink: 1,
       flexGrow: 1
     },
@@ -183,7 +190,12 @@ const generateStyle = (componentTheme, props, state) => {
     afterElement: {
       label: 'textInput__afterElement',
       ...flexItemBase,
-      paddingInlineEnd: componentTheme.padding
+      paddingInlineEnd: componentTheme.padding,
+      // we only override the padding once the width is calculated,
+      // it needs the padding on render
+      ...(afterElementHasWidth === false && {
+        paddingInlineEnd: 0
+      })
     }
   };
 };

package/lib/TextInput/index.js

@@ -53,6 +53,8 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     super(props);
     this.ref = null;
     this._input = null;
+    this._beforeElement = null;
+    this._afterElement = null;
     this._defaultId = void 0;
     this._messagesId = void 0;
     this._focusListener = null;
@@ -68,10 +70,16 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
 
     this.makeStyleProps = () => {
       const interaction = this.interaction;
+      const _this$state = this.state,
+            hasFocus = _this$state.hasFocus,
+            beforeElementHasWidth = _this$state.beforeElementHasWidth,
+            afterElementHasWidth = _this$state.afterElementHasWidth;
       return {
         disabled: interaction === 'disabled',
         invalid: this.invalid,
-        focused: this.state.hasFocus
+        focused: hasFocus,
+        beforeElementHasWidth,
+        afterElementHasWidth
       };
     };
 
@@ -110,7 +118,9 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     };
 
     this.state = {
-      hasFocus: false
+      hasFocus: false,
+      beforeElementHasWidth: void 0,
+      afterElementHasWidth: void 0
     };
     this._defaultId = props.deterministicId();
     this._messagesId = props.deterministicId('TextInput-messages');
@@ -119,11 +129,15 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
-
     if (this._input) {
       this._focusListener = (0, _addEventListener.addEventListener)(this._input, 'focus', this.handleFocus);
+      this.setState({
+        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement),
+        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+      });
     }
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
   componentWillUnmount() {
@@ -132,9 +146,21 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
 
+    if (prevProps.renderBeforeInput !== this.props.renderBeforeInput) {
+      this.setState({
+        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement)
+      });
+    }
+
+    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
+      this.setState({
+        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+      });
+    }
+
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
@@ -219,6 +245,19 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     }));
   }
 
+  getElementHasWidth(element) {
+    if (!element) {
+      return void 0;
+    }
+
+    const computedStyle = getComputedStyle(element);
+    const width = computedStyle.width,
+          paddingInlineStart = computedStyle.paddingInlineStart,
+          paddingInlineEnd = computedStyle.paddingInlineEnd;
+    const elementWidth = parseFloat(width) - parseFloat(paddingInlineStart) - parseFloat(paddingInlineEnd);
+    return elementWidth > 0;
+  }
+
   render() {
     const _this$props4 = this.props,
           width = _this$props4.width,
@@ -229,9 +268,9 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           messages = _this$props4.messages,
           inputContainerRef = _this$props4.inputContainerRef,
           styles = _this$props4.styles;
-    const hasBeforeElement = renderBeforeInput && (0, _callRenderProp.callRenderProp)(renderBeforeInput);
-    const hasAfterElement = renderAfterInput && (0, _callRenderProp.callRenderProp)(renderAfterInput);
-    const renderBeforeOrAfter = hasBeforeElement || hasAfterElement;
+    const beforeElement = renderBeforeInput ? (0, _callRenderProp.callRenderProp)(renderBeforeInput) : null;
+    const afterElement = renderAfterInput ? (0, _callRenderProp.callRenderProp)(renderAfterInput) : null;
+    const renderBeforeOrAfter = !!beforeElement || !!afterElement;
     return (0, _emotion.jsx)(_FormField.FormField, {
       id: this.id,
       label: (0, _callRenderProp.callRenderProp)(renderLabel),
@@ -246,17 +285,23 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       css: styles === null || styles === void 0 ? void 0 : styles.facade
     }, renderBeforeOrAfter ? (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.layout
-    }, hasBeforeElement && (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.beforeElement
-    }, (0, _callRenderProp.callRenderProp)(renderBeforeInput)), (0, _emotion.jsx)("span", {
+    }, beforeElement && (0, _emotion.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.beforeElement,
+      ref: e => {
+        this._beforeElement = e;
+      }
+    }, beforeElement), (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
     }, (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.inputLayout
     }, (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
-    }, this.renderInput()), hasAfterElement && (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.afterElement
-    }, (0, _callRenderProp.callRenderProp)(renderAfterInput)))))) :
+    }, this.renderInput()), afterElement && (0, _emotion.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.afterElement,
+      ref: e => {
+        this._afterElement = e;
+      }
+    }, afterElement))))) :
     /* If no prepended or appended content, don't render Flex layout */
     this.renderInput()));
   }

package/lib/TextInput/styles.js

@@ -45,7 +45,9 @@ const generateStyle = (componentTheme, props, state) => {
         shouldNotWrap = props.shouldNotWrap;
   const disabled = state.disabled,
         invalid = state.invalid,
-        focused = state.focused;
+        focused = state.focused,
+        beforeElementHasWidth = state.beforeElementHasWidth,
+        afterElementHasWidth = state.afterElementHasWidth;
   const sizeVariants = {
     small: {
       fontSize: componentTheme.smallFontSize,
@@ -127,7 +129,6 @@ const generateStyle = (componentTheme, props, state) => {
     flexDirection: 'row'
   };
   const flexItemBase = { ...viewBase,
-    minWidth: '0.0625rem',
     flexShrink: 0
   };
   return {
@@ -175,11 +176,17 @@ const generateStyle = (componentTheme, props, state) => {
     beforeElement: {
       label: 'textInput__beforeElement',
       ...flexItemBase,
-      paddingInlineStart: componentTheme.padding
+      paddingInlineStart: componentTheme.padding,
+      // we only override the padding once the width is calculated,
+      // it needs the padding on render
+      ...(beforeElementHasWidth === false && {
+        paddingInlineStart: 0
+      })
     },
     innerWrapper: {
       label: 'textInput__innerWrapper',
       ...flexItemBase,
+      minWidth: '0.0625rem',
       flexShrink: 1,
       flexGrow: 1
     },
@@ -190,7 +197,12 @@ const generateStyle = (componentTheme, props, state) => {
     afterElement: {
       label: 'textInput__afterElement',
       ...flexItemBase,
-      paddingInlineEnd: componentTheme.padding
+      paddingInlineEnd: componentTheme.padding,
+      // we only override the padding once the width is calculated,
+      // it needs the padding on render
+      ...(afterElementHasWidth === false && {
+        paddingInlineEnd: 0
+      })
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "8.23.1-snapshot.7+67fb0a5be",
+  "version": "8.24.0",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,23 +23,23 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-badge": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-color-utils": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-test-utils": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-themes": "8.23.1-snapshot.7+67fb0a5be"
+    "@instructure/ui-babel-preset": "8.24.0",
+    "@instructure/ui-badge": "8.24.0",
+    "@instructure/ui-color-utils": "8.24.0",
+    "@instructure/ui-test-utils": "8.24.0",
+    "@instructure/ui-themes": "8.24.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/shared-types": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-dom-utils": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-form-field": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-icons": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-prop-types": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-react-utils": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-tag": "8.23.1-snapshot.7+67fb0a5be",
-    "@instructure/ui-testable": "8.23.1-snapshot.7+67fb0a5be",
+    "@instructure/emotion": "8.24.0",
+    "@instructure/shared-types": "8.24.0",
+    "@instructure/ui-dom-utils": "8.24.0",
+    "@instructure/ui-form-field": "8.24.0",
+    "@instructure/ui-icons": "8.24.0",
+    "@instructure/ui-prop-types": "8.24.0",
+    "@instructure/ui-react-utils": "8.24.0",
+    "@instructure/ui-tag": "8.24.0",
+    "@instructure/ui-testable": "8.24.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -48,6 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "67fb0a5bed0138c5152872999bf1138dd2fd8fd7"
+  "sideEffects": false
 }

package/src/TextInput/index.tsx

@@ -75,7 +75,11 @@ class TextInput extends Component<TextInputProps, TextInputState> {
 
   constructor(props: TextInputProps) {
     super(props)
-    this.state = { hasFocus: false }
+    this.state = {
+      hasFocus: false,
+      beforeElementHasWidth: undefined,
+      afterElementHasWidth: undefined
+    }
     this._defaultId = props.deterministicId!()
     this._messagesId = props.deterministicId!('TextInput-messages')
   }
@@ -83,8 +87,12 @@ class TextInput extends Component<TextInputProps, TextInputState> {
   ref: Element | null = null
 
   private _input: HTMLInputElement | null = null
-  private _defaultId: string
-  private _messagesId: string
+  private _beforeElement: HTMLSpanElement | null = null
+  private _afterElement: HTMLSpanElement | null = null
+
+  private readonly _defaultId: string
+  private readonly _messagesId: string
+
   private _focusListener: { remove(): void } | null = null
 
   handleRef = (el: Element | null) => {
@@ -96,15 +104,22 @@ class TextInput extends Component<TextInputProps, TextInputState> {
       elementRef(el)
     }
   }
+
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStyleProps())
     if (this._input) {
       this._focusListener = addEventListener(
         this._input,
         'focus',
         this.handleFocus
       )
+
+      this.setState({
+        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement),
+        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+      })
     }
+
+    this.props.makeStyles?.(this.makeStyleProps())
   }
 
   componentWillUnmount() {
@@ -113,16 +128,30 @@ class TextInput extends Component<TextInputProps, TextInputState> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: TextInputProps) {
+    if (prevProps.renderBeforeInput !== this.props.renderBeforeInput) {
+      this.setState({
+        beforeElementHasWidth: this.getElementHasWidth(this._beforeElement)
+      })
+    }
+    if (prevProps.renderAfterInput !== this.props.renderAfterInput) {
+      this.setState({
+        afterElementHasWidth: this.getElementHasWidth(this._afterElement)
+      })
+    }
+
     this.props.makeStyles?.(this.makeStyleProps())
   }
 
   makeStyleProps = (): TextInputStyleProps => {
     const { interaction } = this
+    const { hasFocus, beforeElementHasWidth, afterElementHasWidth } = this.state
     return {
       disabled: interaction === 'disabled',
       invalid: this.invalid,
-      focused: this.state.hasFocus
+      focused: hasFocus,
+      beforeElementHasWidth,
+      afterElementHasWidth
     }
   }
 
@@ -243,6 +272,22 @@ class TextInput extends Component<TextInputProps, TextInputState> {
     )
   }
 
+  getElementHasWidth(element: HTMLSpanElement | null) {
+    if (!element) {
+      return undefined
+    }
+
+    const computedStyle = getComputedStyle(element)
+    const { width, paddingInlineStart, paddingInlineEnd } = computedStyle
+
+    const elementWidth =
+      parseFloat(width) -
+      parseFloat(paddingInlineStart) -
+      parseFloat(paddingInlineEnd)
+
+    return elementWidth > 0
+  }
+
   render() {
     const {
       width,
@@ -255,11 +300,14 @@ class TextInput extends Component<TextInputProps, TextInputState> {
       styles
     } = this.props
 
-    const hasBeforeElement =
-      renderBeforeInput && callRenderProp(renderBeforeInput)
-    const hasAfterElement = renderAfterInput && callRenderProp(renderAfterInput)
+    const beforeElement: React.ReactNode = renderBeforeInput
+      ? callRenderProp(renderBeforeInput)
+      : null
+    const afterElement: React.ReactNode = renderAfterInput
+      ? callRenderProp(renderAfterInput)
+      : null
 
-    const renderBeforeOrAfter = hasBeforeElement || hasAfterElement
+    const renderBeforeOrAfter = !!beforeElement || !!afterElement
 
     return (
       <FormField
@@ -277,9 +325,14 @@ class TextInput extends Component<TextInputProps, TextInputState> {
           {renderBeforeOrAfter ? (
             <div>
               <span css={styles?.layout}>
-                {hasBeforeElement && (
-                  <span css={styles?.beforeElement}>
-                    {callRenderProp(renderBeforeInput)}
+                {beforeElement && (
+                  <span
+                    css={styles?.beforeElement}
+                    ref={(e) => {
+                      this._beforeElement = e
+                    }}
+                  >
+                    {beforeElement}
                   </span>
                 )}
                 <span css={styles?.innerWrapper}>
@@ -289,9 +342,14 @@ class TextInput extends Component<TextInputProps, TextInputState> {
                   */}
                   <span css={styles?.inputLayout}>
                     <span css={styles?.innerWrapper}>{this.renderInput()}</span>
-                    {hasAfterElement && (
-                      <span css={styles?.afterElement}>
-                        {callRenderProp(renderAfterInput)}
+                    {afterElement && (
+                      <span
+                        css={styles?.afterElement}
+                        ref={(e) => {
+                          this._afterElement = e
+                        }}
+                      >
+                        {afterElement}
                       </span>
                     )}
                   </span>

package/src/TextInput/props.ts

@@ -183,7 +183,8 @@ type TextInputProps = TextInputOwnProps &
   > &
   // The component will handle pass this prop to FormField, but it shouldn't be
   // listed as a prop
-  Pick<FormFieldProps, 'layout'> & WithDeterministicIdProps
+  Pick<FormFieldProps, 'layout'> &
+  WithDeterministicIdProps
 
 type TextInputStyle = ComponentStyle<
   | 'textInput'
@@ -249,12 +250,16 @@ const allowedProps: AllowedPropKeys = [
 
 type TextInputState = {
   hasFocus: boolean
+  beforeElementHasWidth?: boolean
+  afterElementHasWidth?: boolean
 }
 
 type TextInputStyleProps = {
   disabled: boolean
   invalid: boolean
   focused: TextInputState['hasFocus']
+  beforeElementHasWidth: TextInputState['beforeElementHasWidth']
+  afterElementHasWidth: TextInputState['afterElementHasWidth']
 }
 
 export type {