@instructure/ui-text-input 11.7.5-snapshot-23 → 11.7.5-snapshot-24

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.
 
-## [11.7.5-snapshot-23](https://github.com/instructure/instructure-ui/compare/v11.7.4...v11.7.5-snapshot-23) (2026-08-03)
+## [11.7.5-snapshot-24](https://github.com/instructure/instructure-ui/compare/v11.7.4...v11.7.5-snapshot-24) (2026-08-06)
 
-**Note:** Version bump only for package @instructure/ui-text-input
+
+### Features
+
+* **ui-text-input,ui-select:** add forcePlaceholder prop to TextInput ([7a87063](https://github.com/instructure/instructure-ui/commit/7a870631b091839b360d1ca8bb4fd6ea171315da))
 
 
 

package/es/TextInput/v2/index.js

@@ -46,6 +46,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyl
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
     interaction: undefined,
     isRequired: false,
+    forcePlaceholder: false,
     display: 'block',
     shouldNotWrap: false,
     renderBeforeInputElementGap: 'default',
@@ -174,6 +175,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyl
       value,
       defaultValue,
       isRequired,
+      forcePlaceholder,
       onFocus,
       ...rest
     } = this.props;
@@ -197,7 +199,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyl
       css: this.props.styles?.textInput,
       defaultValue: defaultValue,
       value: value,
-      placeholder: interaction === 'enabled' ? placeholder : undefined,
+      placeholder: forcePlaceholder || interaction === 'enabled' ? placeholder : undefined,
       ref: this.handleInputRef,
       type: type,
       id: this.id,

package/es/TextInput/v2/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'renderBeforeInputElementGap', 'placeholder', 'isRequired', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus', 'margin'];
+const allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'renderBeforeInputElementGap', 'placeholder', 'isRequired', 'forcePlaceholder', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus', 'margin'];
 export { allowedProps };

package/lib/TextInput/v2/index.js

@@ -57,6 +57,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
     interaction: undefined,
     isRequired: false,
+    forcePlaceholder: false,
     display: 'block',
     shouldNotWrap: false,
     renderBeforeInputElementGap: 'default',
@@ -185,6 +186,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       value,
       defaultValue,
       isRequired,
+      forcePlaceholder,
       onFocus,
       ...rest
     } = this.props;
@@ -208,7 +210,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       css: this.props.styles?.textInput,
       defaultValue: defaultValue,
       value: value,
-      placeholder: interaction === 'enabled' ? placeholder : undefined,
+      placeholder: forcePlaceholder || interaction === 'enabled' ? placeholder : undefined,
       ref: this.handleInputRef,
       type: type,
       id: this.id,

package/lib/TextInput/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'renderBeforeInputElementGap', 'placeholder', 'isRequired', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus', 'margin'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'renderBeforeInputElementGap', 'placeholder', 'isRequired', 'forcePlaceholder', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus', 'margin'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "11.7.5-snapshot-23",
+  "version": "11.7.5-snapshot-24",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -18,21 +18,21 @@
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-babel-preset": "11.7.5-snapshot-23",
-    "@instructure/ui-badge": "11.7.5-snapshot-23",
-    "@instructure/ui-axe-check": "11.7.5-snapshot-23",
-    "@instructure/ui-color-utils": "11.7.5-snapshot-23"
+    "@instructure/ui-badge": "11.7.5-snapshot-24",
+    "@instructure/ui-babel-preset": "11.7.5-snapshot-24",
+    "@instructure/ui-color-utils": "11.7.5-snapshot-24",
+    "@instructure/ui-axe-check": "11.7.5-snapshot-24"
   },
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.5-snapshot-23",
-    "@instructure/shared-types": "11.7.5-snapshot-23",
-    "@instructure/ui-dom-utils": "11.7.5-snapshot-23",
-    "@instructure/ui-a11y-utils": "11.7.5-snapshot-23",
-    "@instructure/ui-form-field": "11.7.5-snapshot-23",
-    "@instructure/ui-react-utils": "11.7.5-snapshot-23",
-    "@instructure/ui-tag": "11.7.5-snapshot-23",
-    "@instructure/ui-themes": "11.7.5-snapshot-23"
+    "@instructure/emotion": "11.7.5-snapshot-24",
+    "@instructure/shared-types": "11.7.5-snapshot-24",
+    "@instructure/ui-a11y-utils": "11.7.5-snapshot-24",
+    "@instructure/ui-dom-utils": "11.7.5-snapshot-24",
+    "@instructure/ui-form-field": "11.7.5-snapshot-24",
+    "@instructure/ui-react-utils": "11.7.5-snapshot-24",
+    "@instructure/ui-tag": "11.7.5-snapshot-24",
+    "@instructure/ui-themes": "11.7.5-snapshot-24"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/TextInput/v2/index.tsx

@@ -59,6 +59,7 @@ class TextInput extends Component<TextInputProps> {
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
     interaction: undefined,
     isRequired: false,
+    forcePlaceholder: false,
     display: 'block',
     shouldNotWrap: false,
     renderBeforeInputElementGap: 'default',
@@ -222,6 +223,7 @@ class TextInput extends Component<TextInputProps> {
       value,
       defaultValue,
       isRequired,
+      forcePlaceholder,
       onFocus,
       ...rest
     } = this.props
@@ -250,7 +252,11 @@ class TextInput extends Component<TextInputProps> {
         css={this.props.styles?.textInput}
         defaultValue={defaultValue}
         value={value}
-        placeholder={interaction === 'enabled' ? placeholder : undefined}
+        placeholder={
+          forcePlaceholder || interaction === 'enabled'
+            ? placeholder
+            : undefined
+        }
         ref={this.handleInputRef}
         type={type}
         id={this.id}

package/src/TextInput/v2/props.ts

@@ -74,6 +74,7 @@ type TextInputOwnProps = {
    * When "disabled", the input changes visibly to indicate that it cannot
    * receive user interactions. When "readonly" the input still cannot receive
    * user interactions but it keeps the same styles as if it were enabled.
+   * Note: placeholder is only displayed when interaction is enabled. You can force it with forcePlaceholder prop
    */
   interaction?: InteractionType
 
@@ -139,6 +140,11 @@ type TextInputOwnProps = {
    */
   isRequired?: boolean
 
+  /**
+   * Always displays placeholder when textInput is empty, regardless of interaction type
+   */
+  forcePlaceholder?: boolean
+
   /**
    * provides a reference to the underlying html root element
    */
@@ -229,6 +235,7 @@ const allowedProps: AllowedPropKeys = [
   'renderBeforeInputElementGap',
   'placeholder',
   'isRequired',
+  'forcePlaceholder',
   'elementRef',
   'inputRef',
   'inputContainerRef',