@dr.pogodin/react-utils 1.43.28 → 1.43.29

package/build/types-code/shared/components/Input/index.d.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import { type Ref } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
 type ThemeKeyT = 'container' | 'input' | 'label';
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.43.28",
+  "version": "1.43.29",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -16,7 +16,7 @@
     "@dr.pogodin/react-helmet": "^3.0.2",
     "@dr.pogodin/react-themes": "^1.9.2",
     "@jest/environment": "^30.0.5",
-    "axios": "^1.10.0",
+    "axios": "^1.11.0",
     "commander": "^14.0.0",
     "compression": "^1.8.1",
     "config": "^4.0.1",
@@ -107,7 +107,7 @@
     "source-map-loader": "^5.0.0",
     "stylelint": "^16.22.0",
     "stylelint-config-standard-scss": "^15.0.1",
-    "supertest": "^7.1.3",
+    "supertest": "^7.1.4",
     "tsc-alias": "1.8.16",
     "tstyche": "^4.3.0",
     "typed-scss-modules": "^8.1.1",

package/src/shared/components/Input/index.tsx

@@ -1,4 +1,4 @@
-import type { FunctionComponent, Ref } from 'react';
+import { type FunctionComponent, type Ref, useRef } from 'react';
 
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
@@ -27,19 +27,31 @@ const Input: FunctionComponent<PropsT> = ({
   testId,
   theme,
   ...rest
-}) => (
-  <span className={theme.container}>
-    { label === undefined ? null : <div className={theme.label}>{label}</div> }
-    <input
-      className={theme.input}
-      data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
-      ref={ref}
+}) => {
+  const localRef = useRef<HTMLInputElement>(null);
+  return (
+    <span
+      className={theme.container}
+      onFocus={() => {
+        // TODO: It does not really work if a callback-style `ref` is passed in,
+        // we need a more complex logic to cover that case, but for now this serves
+        // the case we need it for.
+        if (typeof ref === 'object') ref?.current?.focus();
+        else localRef.current?.focus();
+      }}
+    >
+      {label === undefined ? null : <div className={theme.label}>{label}</div>}
+      <input
+        className={theme.input}
+        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
+        ref={ref ?? localRef}
 
-      // TODO: Avoid the spreading later.
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-    />
-  </span>
-);
+        // TODO: Avoid the spreading later.
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
+      />
+    </span>
+  );
+};
 
 export default themed(Input, 'Input', defaultTheme);

package/src/shared/components/Input/theme.scss

@@ -23,5 +23,6 @@
 
   &.label {
     margin: 0 0.6em 0 1.5em;
+    pointer-events: none;
   }
 }

package/src/shared/components/TextArea/index.tsx

@@ -41,6 +41,8 @@ const TextArea: FunctionComponent<Props> = ({
   const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);
   const [height, setHeight] = useState<number | undefined>();
 
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
   const [localValue, setLocalValue] = useState(value ?? '');
   if (value !== undefined && localValue !== value) setLocalValue(value);
 
@@ -73,7 +75,12 @@ const TextArea: FunctionComponent<Props> = ({
   }, [localValue]);
 
   return (
-    <div className={theme.container}>
+    <div
+      className={theme.container}
+      onFocus={() => {
+        textAreaRef.current?.focus();
+      }}
+    >
       {label === undefined ? null : <div className={theme.label}>{label}</div>}
       <textarea
         className={`${theme.textarea} ${theme.hidden}`}
@@ -111,6 +118,7 @@ const TextArea: FunctionComponent<Props> = ({
         }
         onKeyDown={onKeyDown}
         placeholder={placeholder}
+        ref={textAreaRef}
         style={{ height }}
         value={localValue}
       />

package/src/shared/components/selectors/NativeDropdown/theme.scss

@@ -45,6 +45,7 @@
 
   &.label {
     margin: 0 0.6em 0 1.5em;
+    pointer-events: none;
   }
 
   &.option { color: black; }