@instructure/ui-text-input 8.20.0 → 8.20.1-snapshot.19

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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.0",
+  "version": "8.20.1-snapshot.19+002505b76",
   "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.0",
-    "@instructure/ui-badge": "8.20.0",
-    "@instructure/ui-color-utils": "8.20.0",
-    "@instructure/ui-test-utils": "8.20.0",
-    "@instructure/ui-themes": "8.20.0"
+    "@instructure/ui-babel-preset": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-badge": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-color-utils": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-test-utils": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-themes": "8.20.1-snapshot.19+002505b76"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.20.0",
-    "@instructure/shared-types": "8.20.0",
-    "@instructure/ui-dom-utils": "8.20.0",
-    "@instructure/ui-form-field": "8.20.0",
-    "@instructure/ui-icons": "8.20.0",
-    "@instructure/ui-prop-types": "8.20.0",
-    "@instructure/ui-react-utils": "8.20.0",
-    "@instructure/ui-tag": "8.20.0",
-    "@instructure/ui-testable": "8.20.0",
+    "@instructure/emotion": "8.20.1-snapshot.19+002505b76",
+    "@instructure/shared-types": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-dom-utils": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-form-field": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-icons": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-prop-types": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-react-utils": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-tag": "8.20.1-snapshot.19+002505b76",
+    "@instructure/ui-testable": "8.20.1-snapshot.19+002505b76",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -48,5 +48,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "002505b762a235d29c27eb3fc8b69bcaff7482c2"
 }

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}
       />
     )
   }