Merge pull request #1190 from EcrituresNumeriques/fix/1189

EcrituresNumeriques · Jan 21, 2025 · 2042c33 · 2042c33
2 parents b31273b + 2964f10
commit 2042c33
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/front/src/components/Field.jsx b/front/src/components/Field.jsx
@@ -1,28 +1,39 @@
 import clsx from 'clsx'
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import styles from './field.module.scss'
 
 export default forwardRef(function Field(
-  { hasError, className, prefix, children, label, id, type, ...otherProps },
+  {
+    hasError,
+    className,
+    prefix,
+    children,
+    label,
+    id,
+    type,
+    autoFocus = false,
+    ...otherProps
+  },
   forwardedRef
 ) {
-  const classNames = [
+  const inputRef = forwardedRef ?? useRef()
+  const classNames = clsx(
     styles.field,
     prefix && styles.withPrefix,
     'control-field',
-  ]
-
-  if (className) {
-    classNames.push(className)
-  }
-  if (hasError) {
-    classNames.push(styles.error)
-  }
+    className && className,
+    hasError && styles.error
+  )
 
   const computedStyles = { '--chars-count': prefix?.length }
+  useEffect(() => {
+    if (autoFocus) {
+      inputRef.current.focus()
+    }
+  }, [])
 
   return (
-    <div className={clsx(classNames)}>
+    <div className={classNames}>
       {label && <label htmlFor={id}>{label}</label>}
       <div
         className={clsx('control', otherProps.icon && 'has-icons-left')}
@@ -36,7 +47,7 @@ export default forwardRef(function Field(
               {...otherProps}
               className="input"
               type={type || 'text'}
-              ref={forwardedRef}
+              ref={inputRef}
             />
             {otherProps.icon && (
               <span className="icon is-small is-left">

diff --git a/front/src/components/TagCreate.jsx b/front/src/components/TagCreate.jsx
@@ -61,6 +61,7 @@ export default function TagCreate() {
     <section className={styles.create}>
       <form onSubmit={handleCreateTag}>
         <Field
+          autoFocus={true}
           label={t('tag.createForm.nameField')}
           type="text"
           {...nameBindings}

diff --git a/front/src/components/workspace/CreateWorkspace.jsx b/front/src/components/workspace/CreateWorkspace.jsx
@@ -24,6 +24,7 @@ export default function CreateWorkspace() {
     <section>
       <form onSubmit={handleSubmit}>
         <Field
+          autoFocus={true}
           ref={nameInputRef}
           {...nameBindings}
           label={t('workspace.createForm.nameField')}