@instructure/ui-text-input 8.20.1-snapshot.5 → 8.21.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.21.0](https://github.com/instructure/instructure-ui/compare/v8.20.0...v8.21.0) (2022-03-30)
+
+### Bug Fixes
+
+- **ui-text-input:** fix Event handling for `TextInput`, so that the focus ring will appear as intended when used as `Popover` trigger ([002505b](https://github.com/instructure/instructure-ui/commit/002505b762a235d29c27eb3fc8b69bcaff7482c2))
+
 # [8.20.0](https://github.com/instructure/instructure-ui/compare/v8.19.0...v8.20.0) (2022-03-22)
 
 **Note:** Version bump only for package @instructure/ui-text-input

package/es/TextInput/index.js

@@ -30,7 +30,7 @@ var _dec, _dec2, _dec3, _class, _class2, _temp;
 /** @jsx jsx */
 import React, { Component } from 'react';
 import { callRenderProp, getInteraction, passthroughProps, withDeterministicId } from '@instructure/ui-react-utils';
-import { isActiveElement } from '@instructure/ui-dom-utils';
+import { isActiveElement, addEventListener } from '@instructure/ui-dom-utils';
 import { FormField } from '@instructure/ui-form-field';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
@@ -52,6 +52,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     this._input = null;
     this._defaultId = void 0;
     this._messagesId = void 0;
+    this._focusListener = null;
 
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -116,6 +117,16 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     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);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._focusListener) {
+      this._focusListener.remove();
+    }
   }
 
   componentDidUpdate() {
@@ -202,8 +213,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       "aria-describedby": descriptionIds !== '' ? descriptionIds : void 0,
       size: htmlSize,
       onChange: this.handleChange,
-      onBlur: this.handleBlur,
-      onFocus: this.handleFocus
+      onBlur: this.handleBlur
     }));
   }
 

package/lib/TextInput/index.js

@@ -23,6 +23,8 @@ var _withDeterministicId = require("@instructure/ui-react-utils/lib/Deterministi
 
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 
+var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
+
 var _FormField = require("@instructure/ui-form-field/lib/FormField");
 
 var _testable = require("@instructure/ui-testable/lib/testable.js");
@@ -53,6 +55,7 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     this._input = null;
     this._defaultId = void 0;
     this._messagesId = void 0;
+    this._focusListener = null;
 
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -117,6 +120,16 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     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);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._focusListener) {
+      this._focusListener.remove();
+    }
   }
 
   componentDidUpdate() {
@@ -202,8 +215,7 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       "aria-describedby": descriptionIds !== '' ? descriptionIds : void 0,
       size: htmlSize,
       onChange: this.handleChange,
-      onBlur: this.handleBlur,
-      onFocus: this.handleFocus
+      onBlur: this.handleBlur
     }));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "8.20.1-snapshot.5+b20e944b1",
+  "version": "8.21.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.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-badge": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-color-utils": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-test-utils": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-themes": "8.20.1-snapshot.5+b20e944b1"
+    "@instructure/ui-babel-preset": "8.21.0",
+    "@instructure/ui-badge": "8.21.0",
+    "@instructure/ui-color-utils": "8.21.0",
+    "@instructure/ui-test-utils": "8.21.0",
+    "@instructure/ui-themes": "8.21.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/shared-types": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-dom-utils": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-form-field": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-icons": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-prop-types": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-react-utils": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-tag": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-testable": "8.20.1-snapshot.5+b20e944b1",
+    "@instructure/emotion": "8.21.0",
+    "@instructure/shared-types": "8.21.0",
+    "@instructure/ui-dom-utils": "8.21.0",
+    "@instructure/ui-form-field": "8.21.0",
+    "@instructure/ui-icons": "8.21.0",
+    "@instructure/ui-prop-types": "8.21.0",
+    "@instructure/ui-react-utils": "8.21.0",
+    "@instructure/ui-tag": "8.21.0",
+    "@instructure/ui-testable": "8.21.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -48,6 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "b20e944b13616f430d7b27eb61ccdb3eb3c87fcf"
+  "sideEffects": false
 }

package/src/TextInput/index.tsx

@@ -31,7 +31,7 @@ import {
   passthroughProps,
   withDeterministicId
 } from '@instructure/ui-react-utils'
-import { isActiveElement } from '@instructure/ui-dom-utils'
+import { isActiveElement, addEventListener } from '@instructure/ui-dom-utils'
 import { FormField } from '@instructure/ui-form-field'
 import { testable } from '@instructure/ui-testable'
 import { withStyle, jsx } from '@instructure/emotion'
@@ -85,6 +85,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
   private _input: HTMLInputElement | null = null
   private _defaultId: string
   private _messagesId: string
+  private _focusListener: { remove(): void } | null = null
 
   handleRef = (el: Element | null) => {
     const { elementRef } = this.props
@@ -97,6 +98,19 @@ class TextInput extends Component<TextInputProps, TextInputState> {
   }
   componentDidMount() {
     this.props.makeStyles?.(this.makeStyleProps())
+    if (this._input) {
+      this._focusListener = addEventListener(
+        this._input,
+        'focus',
+        this.handleFocus
+      )
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._focusListener) {
+      this._focusListener.remove()
+    }
   }
 
   componentDidUpdate() {
@@ -225,7 +239,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
         size={htmlSize}
         onChange={this.handleChange}
         onBlur={this.handleBlur}
-        onFocus={this.handleFocus}
       />
     )
   }