fix(ui-text-input): make TextInput maintain focus when renderAfterInput is conditionally rendered

INSTUI-4466

Author: ToMESSKa

cypress/component/TextInput.cy.tsx

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
-import { TextInput } from '../../packages/ui'
+import React, { useState } from 'react'
+import { TextInput } from '@instructure/ui'
 
 import '../support/component'
 import 'cypress-real-events'
@@ -110,4 +110,43 @@ describe('<TextInput/>', () => {
       '12px'
     )
   })
+
+  it('should maintain focus while typing when after-content is conditionally rendered', () => {
+    const TextTextInput = () => {
+      const [value, setValue] = useState('')
+
+      const renderAfterInput = () => {
+        if (!value) return
+        return <div>Hello!</div>
+      }
+
+      return (
+        <TextInput
+          value={value}
+          onChange={(event, newValue) => {
+            setValue(newValue)
+          }}
+          renderAfterInput={renderAfterInput}
+        />
+      )
+    }
+    cy.mount(<TextTextInput />)
+
+    cy.get('input').as('textInput').click().should('be.focused')
+    cy.get('[class*="textInput__afterElement"]').should('not.exist')
+
+    cy.get('@textInput')
+      .type('a')
+      .should(($input) => {
+        expect($input).to.have.value('a')
+      })
+      .should('have.focus')
+
+    cy.get('[class*="textInput__afterElement"]').should('contain', 'Hello!')
+
+    cy.get('@textInput')
+      .type('bc')
+      .should('have.value', 'abc')
+      .and('be.focused')
+  })
 })

packages/ui-text-input/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) ? (