fix(ui-text-area): fix focusring issues in case of horizontal resize

Closes: INSTUI-3793
instructure · Jul 5, 2023 · dcbda2e · dcbda2e
1 parent 2371514
commit dcbda2e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/packages/ui-text-area/src/TextArea/README.md b/packages/ui-text-area/src/TextArea/README.md
@@ -105,6 +105,7 @@ class Example extends React.Component {
 
 render(<Example/>)
 ```
+
 ### Guidelines
 
 ```js
@@ -123,3 +124,17 @@ guidelines: true
   </Figure>
 </Guidelines>
 ```
+
+```js
+---
+guidelines: true
+---
+<Guidelines>
+  <Alert
+    variant="info"
+    margin="small"
+  >
+    Every non-listed prop will be passed down to the underlying 'textarea' element, such as 'onBlur' and any other prop
+  </Alert>
+</Guidelines>
+```
diff --git a/packages/ui-text-area/src/TextArea/index.tsx b/packages/ui-text-area/src/TextArea/index.tsx
@@ -84,13 +84,31 @@ class TextArea extends Component<TextAreaProps> {
   private _container: HTMLDivElement | null = null
   private _height?: string
   private _manuallyResized = false
+  private _highlightRef: HTMLSpanElement | null = null
+  private myObserver: ResizeObserver
+  private resizeTimeout?: NodeJS.Timeout
 
   ref: Element | null = null
 
   constructor(props: TextAreaProps) {
     super(props)
 
     this._defaultId = props.deterministicId!()
+
+    this.myObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (this._highlightRef) {
+          this._highlightRef.style.transition = 'none'
+          this._highlightRef.style.width = `calc(${entry.contentRect.width}px + 2.125rem)`
+          this._highlightRef.style.height = `calc(${entry.contentRect.height}px + 2.125rem)`
+          clearTimeout(this.resizeTimeout)
+
+          this.resizeTimeout = setTimeout(() => {
+            this._highlightRef!.style.transition = 'all 0.2s'
+          }, 500)
+        }
+      }
+    })
   }
 
   componentDidMount() {
@@ -293,6 +311,10 @@ class TextArea extends Component<TextAreaProps> {
         defaultValue={defaultValue}
         placeholder={placeholder}
         ref={(textarea) => {
+          if (textarea) {
+            this.myObserver.observe(textarea)
+          }
+
           this._textarea = textarea
           if (typeof textareaRef === 'function') {
             textareaRef(textarea)
@@ -329,7 +351,11 @@ class TextArea extends Component<TextAreaProps> {
         >
           {textarea}
           {!disabled && !readOnly ? (
-            <span css={this.props.styles?.textAreaOutline} aria-hidden="true" />
+            <span
+              css={this.props.styles?.textAreaOutline}
+              aria-hidden="true"
+              ref={(e) => (this._highlightRef = e)}
+            />
           ) : null}
         </div>
       </FormField>