@instructure/ui-text-input 10.15.3-snapshot-2 → 10.16.0

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.15.3-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.15.3-snapshot-2) (2025-04-11)
+# [10.16.0](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.16.0) (2025-04-11)
 
-**Note:** Version bump only for package @instructure/ui-text-input
+
+### Bug Fixes
+
+* **ui-text-input:** make TextInput maintain focus when renderAfterInput is conditionally rendered ([c124e16](https://github.com/instructure/instructure-ui/commit/c124e16000e1d60e49372ade27633dbeb48e22ae))
 
 
 

package/es/TextInput/index.js

@@ -64,12 +64,13 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       const _this$state = this.state,
         hasFocus = _this$state.hasFocus,
         afterElementHasWidth = _this$state.afterElementHasWidth;
+      const beforeElement = this.props.renderBeforeInput ? callRenderProp(this.props.renderBeforeInput) : null;
       return {
         disabled: interaction === 'disabled',
         invalid: this.invalid,
         focused: hasFocus,
         afterElementHasWidth: afterElementHasWidth,
-        beforeElementExists: this.props.renderBeforeInput != void 0
+        beforeElementExists: !!beforeElement
       };
     };
     this.handleInputRef = node => {
@@ -235,7 +236,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       styles = _this$props4.styles;
     const beforeElement = renderBeforeInput ? callRenderProp(renderBeforeInput) : null;
     const afterElement = renderAfterInput ? callRenderProp(renderAfterInput) : null;
-    const renderBeforeOrAfter = !!beforeElement || !!afterElement;
+    const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== void 0 || renderAfterInput !== void 0;
     const rawLabel = callRenderProp(renderLabel);
     const label = hasVisibleChildren(rawLabel) ? jsx(React.Fragment, null, rawLabel, isRequired && jsx("span", {
       css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},

package/lib/TextInput/index.js

@@ -74,12 +74,13 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       const _this$state = this.state,
         hasFocus = _this$state.hasFocus,
         afterElementHasWidth = _this$state.afterElementHasWidth;
+      const beforeElement = this.props.renderBeforeInput ? (0, _callRenderProp.callRenderProp)(this.props.renderBeforeInput) : null;
       return {
         disabled: interaction === 'disabled',
         invalid: this.invalid,
         focused: hasFocus,
         afterElementHasWidth: afterElementHasWidth,
-        beforeElementExists: this.props.renderBeforeInput != void 0
+        beforeElementExists: !!beforeElement
       };
     };
     this.handleInputRef = node => {
@@ -245,7 +246,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       styles = _this$props4.styles;
     const beforeElement = renderBeforeInput ? (0, _callRenderProp.callRenderProp)(renderBeforeInput) : null;
     const afterElement = renderAfterInput ? (0, _callRenderProp.callRenderProp)(renderAfterInput) : null;
-    const renderBeforeOrAfter = !!beforeElement || !!afterElement;
+    const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== void 0 || renderAfterInput !== void 0;
     const rawLabel = (0, _callRenderProp.callRenderProp)(renderLabel);
     const label = (0, _hasVisibleChildren.hasVisibleChildren)(rawLabel) ? (0, _emotion.jsx)(_react.default.Fragment, null, rawLabel, isRequired && (0, _emotion.jsx)("span", {
       css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "10.15.3-snapshot-2",
+  "version": "10.16.0",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,12 +23,12 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.15.3-snapshot-2",
-    "@instructure/ui-babel-preset": "10.15.3-snapshot-2",
-    "@instructure/ui-badge": "10.15.3-snapshot-2",
-    "@instructure/ui-color-utils": "10.15.3-snapshot-2",
-    "@instructure/ui-test-utils": "10.15.3-snapshot-2",
-    "@instructure/ui-themes": "10.15.3-snapshot-2",
+    "@instructure/ui-axe-check": "10.16.0",
+    "@instructure/ui-babel-preset": "10.16.0",
+    "@instructure/ui-badge": "10.16.0",
+    "@instructure/ui-color-utils": "10.16.0",
+    "@instructure/ui-test-utils": "10.16.0",
+    "@instructure/ui-themes": "10.16.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.15.3-snapshot-2",
-    "@instructure/shared-types": "10.15.3-snapshot-2",
-    "@instructure/ui-dom-utils": "10.15.3-snapshot-2",
-    "@instructure/ui-form-field": "10.15.3-snapshot-2",
-    "@instructure/ui-icons": "10.15.3-snapshot-2",
-    "@instructure/ui-prop-types": "10.15.3-snapshot-2",
-    "@instructure/ui-react-utils": "10.15.3-snapshot-2",
-    "@instructure/ui-tag": "10.15.3-snapshot-2",
-    "@instructure/ui-testable": "10.15.3-snapshot-2",
+    "@instructure/emotion": "10.16.0",
+    "@instructure/shared-types": "10.16.0",
+    "@instructure/ui-dom-utils": "10.16.0",
+    "@instructure/ui-form-field": "10.16.0",
+    "@instructure/ui-icons": "10.16.0",
+    "@instructure/ui-prop-types": "10.16.0",
+    "@instructure/ui-react-utils": "10.16.0",
+    "@instructure/ui-tag": "10.16.0",
+    "@instructure/ui-testable": "10.16.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/TextInput/index.tsx

@@ -145,12 +145,15 @@ class TextInput extends Component<TextInputProps, TextInputState> {
   makeStyleProps = (): TextInputStyleProps => {
     const { interaction } = this
     const { hasFocus, afterElementHasWidth } = this.state
+    const beforeElement = this.props.renderBeforeInput
+      ? callRenderProp(this.props.renderBeforeInput)
+      : null
     return {
       disabled: interaction === 'disabled',
       invalid: this.invalid,
       focused: hasFocus,
       afterElementHasWidth: afterElementHasWidth,
-      beforeElementExists: this.props.renderBeforeInput != undefined
+      beforeElementExists: !!beforeElement
     }
   }
 
@@ -309,7 +312,11 @@ class TextInput extends Component<TextInputProps, TextInputState> {
       ? callRenderProp(renderAfterInput)
       : null
 
-    const renderBeforeOrAfter = !!beforeElement || !!afterElement
+    const renderBeforeOrAfter =
+      !!beforeElement ||
+      !!afterElement ||
+      renderBeforeInput !== undefined ||
+      renderAfterInput !== undefined
 
     const rawLabel = callRenderProp(renderLabel)
     const label = hasVisibleChildren(rawLabel) ? (