fix(textfield): Move tabIndex attribute to input element #564 (#565)

* fix(textfield): Move tabIndex attribute to input element (#564)

* fix(textfield): Move tabIndex attribute to input element (#564)

---------

Co-authored-by: Mikk Orasmaa <mikk.orasmaa@nortal.com>

Author: mkk55

src/tedi/components/form/textfield/textfield.module.scss

@@ -54,6 +54,10 @@ $input-padding-right-map: (
 
 .tedi-textfield__inner {
   position: relative;
+
+  &:focus-within {
+    @include mixins.focus-element;
+  }
 }
 
 .tedi-textfield__input {

src/tedi/components/form/textfield/textfield.tsx

@@ -305,11 +305,23 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
     };
 
     if (isTextAreaRef(props, inputRef)) {
-      return <textarea {...(sharedProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)} ref={inputRef} />;
+      return (
+        <textarea
+          {...(sharedProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+          ref={inputRef}
+          tabIndex={disabled ? -1 : 0}
+        />
+      );
     }
 
     if (isInputRef(props, inputRef)) {
-      return <input {...(sharedProps as React.InputHTMLAttributes<HTMLInputElement>)} ref={inputRef} />;
+      return (
+        <input
+          {...(sharedProps as React.InputHTMLAttributes<HTMLInputElement>)}
+          ref={inputRef}
+          tabIndex={disabled ? -1 : 0}
+        />
+      );
     }
 
     return null;
@@ -395,7 +407,6 @@ export const TextField = forwardRef<TextFieldForwardRef, TextFieldProps>((props,
         onKeyDown={onKeyDown}
         onKeyUp={onKeyUp}
         onClick={onClick}
-        tabIndex={disabled ? -1 : 0}
         ref={innerRef}
       >
         {renderInputElement}