[TextField]: TAB key focuses wrapper instead of input, caret appears only after second TAB

[mkk55]

Problem

When using the component, pressing TAB moves focus to the wrapper element first, not the actual . The caret (text cursor) only appears after pressing TAB a second time.

Solution

Move tabIndex attribute to input element. Changes in textfield.tsx:

return <input {...(sharedProps as React.InputHTMLAttributes<HTMLInputElement>)} ref={inputRef} tabIndex={disabled ? -1 : 0}/>;
...
return <textarea {...(sharedProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)} ref={inputRef} tabIndex={disabled ? -1 : 0}/>;
....
<div
        className={styles['tedi-textfield__inner']}
        onKeyDown={onKeyDown}
        onKeyUp={onKeyUp}
        onClick={onClick}
        ref={innerRef}
>

Add focus-within pseudo-class to tedi-textfield__inner class. Changes in textfield.module.scss:

.tedi-textfield__inner {
  position: relative;

  &:focus-within {
    @include mixins.focus-element;
  }
}

Examples and information

Project

Tehik TJT