From 342eea47c6789311be73171d792485f9b53e03bf Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Thu, 25 Nov 2021 14:00:17 +0100
Subject: [PATCH] Autoselection du lien de partage

---
 .../ShareSimulationBanner/ShareSimulationPopup.tsx         | 6 +++++-
 mon-entreprise/source/design-system/field/NumberField.tsx  | 4 +++-
 mon-entreprise/source/design-system/field/TextField.tsx    | 7 ++++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/mon-entreprise/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx b/mon-entreprise/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx
index 55a39b83cb..e61bb04415 100644
--- a/mon-entreprise/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx
+++ b/mon-entreprise/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx
@@ -13,8 +13,11 @@ export function ShareSimulationPopup({ url }: { url: string }) {
 	const [linkCopied, setLinkCopied] = useState(false)
 	const tracker = useContext(TrackingContext)
 
-	const selectInput = () => inputRef.current?.select()
+	const selectInput = () => {
+		inputRef.current?.select()
+	}
 	useEffect(selectInput, [])
+
 	useEffect(() => {
 		const handler = setTimeout(() => setLinkCopied(false), 5000)
 		return () => {
@@ -36,6 +39,7 @@ export function ShareSimulationPopup({ url }: { url: string }) {
 						inputRef={inputRef}
 						onFocus={selectInput}
 						value={url}
+						autoFocus
 						aria-label="URL de votre simulation"
 					/>
 				</Grid>
diff --git a/mon-entreprise/source/design-system/field/NumberField.tsx b/mon-entreprise/source/design-system/field/NumberField.tsx
index 52aba929a6..76a54064fc 100644
--- a/mon-entreprise/source/design-system/field/NumberField.tsx
+++ b/mon-entreprise/source/design-system/field/NumberField.tsx
@@ -4,6 +4,7 @@ import { useNumberField } from '@react-aria/numberfield'
 import { NumberFieldState } from '@react-stately/numberfield'
 import { AriaNumberFieldProps } from '@react-types/numberfield'
 import {
+	HTMLAttributes,
 	InputHTMLAttributes,
 	RefObject,
 	useCallback,
@@ -28,7 +29,7 @@ type NumberFieldProps = Omit<AriaNumberFieldProps, 'placeholder'> & {
 	displayedUnit?: string
 	small?: boolean
 	placeholder?: number
-	onChange: (n?: number) => void
+	onChange?: (n?: number) => void
 }
 export default function NumberField(props: NumberFieldProps) {
 	const { locale } = useLocale()
@@ -89,6 +90,7 @@ export default function NumberField(props: NumberFieldProps) {
 				small={props.small}
 			>
 				<StyledNumberInput
+					{...(props as HTMLAttributes<HTMLInputElement>)}
 					{...inputWithCursorHandlingProps}
 					placeholder={
 						props.placeholder != null
diff --git a/mon-entreprise/source/design-system/field/TextField.tsx b/mon-entreprise/source/design-system/field/TextField.tsx
index 1fbbb33618..ab21f9e48a 100644
--- a/mon-entreprise/source/design-system/field/TextField.tsx
+++ b/mon-entreprise/source/design-system/field/TextField.tsx
@@ -1,6 +1,6 @@
 import { AriaTextFieldOptions, useTextField } from '@react-aria/textfield'
 import { ExtraSmallBody } from 'DesignSystem/typography/paragraphs'
-import { InputHTMLAttributes, RefObject, useRef } from 'react'
+import { HTMLAttributes, RefObject, useRef } from 'react'
 import styled, { css } from 'styled-components'
 
 const LABEL_HEIGHT = '1rem'
@@ -23,9 +23,10 @@ export default function TextField(props: TextFieldProps) {
 				hasLabel={!!props.label && !props.small}
 			>
 				<StyledInput
-					{...(inputProps as InputHTMLAttributes<HTMLInputElement>)}
+					{...(props as HTMLAttributes<HTMLInputElement>)}
+					{...(inputProps as HTMLAttributes<HTMLInputElement>)}
 					placeholder={inputProps.placeholder ?? ''}
-					ref={ref}
+					ref={props.inputRef || ref}
 				/>
 				{props.label && (
 					<StyledLabel className={props.small ? 'sr-only' : ''} {...labelProps}>