Autoselection du lien de partage

betagouv · Nov 25, 2021 · 342eea4 · 342eea4
1 parent 29f18a4
commit 342eea4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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}>