diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx index a7ff90ff7e..a63b10fc60 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx @@ -8,9 +8,11 @@ import { styled, TextField, } from '@mui/material'; +import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly'; import { type FC, forwardRef, + useId, useImperativeHandle, useRef, useState, @@ -135,6 +137,8 @@ const AddValues = forwardRef( ref, () => positioningRef.current as HTMLButtonElement, ); + const inputRef = useRef(null); + const inputId = useId(); const handleAdd = () => { const newValues = parseParameterStrings(inputValues); @@ -152,14 +156,7 @@ const AddValues = forwardRef( onAddValues(newValues); setInputValues(''); setError(''); - setOpen(false); - }; - - const handleKeyPress = (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { - event.preventDefault(); - handleAdd(); - } + inputRef?.current?.focus(); }; return ( @@ -186,32 +183,44 @@ const AddValues = forwardRef( horizontal: 'left', }} > -
+
{ + e.stopPropagation(); + e.preventDefault(); + handleAdd(); + }} + > {error && {error}} + + + { setInputValues(e.target.value); setError(''); }} - onKeyPress={handleKeyPress} size='small' variant='standard' fullWidth + inputRef={inputRef} autoFocus /> -
+ );