1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-07 01:16:28 +02:00

Stop "add values" from closing on adding a value (#9815)

Instead of closing the "add values" popover when you add a value, we now
keep it open to facilitate rapid entry of multiple values. It already
clears successfully and adds the new value to the list, so it's actually
quite smooth to use from just the keyboard now!

Additionally, I propose using a `form` element for the add values
popover, because it really is just a tiny form. This also allows us to
use regular form handling instead for submission instead of checking
what key the user pressed. It also means we don't need to specify the
action in the button, because the form handles it.

There's a few more things fixed: 
- I've added a label (only visible to screen readers) to the input label
(as per standard a11y guidelines).
- When you add a value by pressing the "add" button, your focus returns
to the input field, so that you can just start typing out the next one.
this is handy if you submit by mouse click or by tabbing to the button
instead of just hitting enter inside the input field.
This commit is contained in:
Thomas Heartman 2025-04-23 09:32:37 +02:00 committed by GitHub
parent b1fc4d60fc
commit 77d72ce5a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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<HTMLButtonElement, AddValuesProps>(
ref,
() => positioningRef.current as HTMLButtonElement,
);
const inputRef = useRef<HTMLInputElement>(null);
const inputId = useId();
const handleAdd = () => {
const newValues = parseParameterStrings(inputValues);
@ -152,14 +156,7 @@ const AddValues = forwardRef<HTMLButtonElement, AddValuesProps>(
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<HTMLButtonElement, AddValuesProps>(
horizontal: 'left',
}}
>
<div>
<form
onSubmit={(e) => {
e.stopPropagation();
e.preventDefault();
handleAdd();
}}
>
{error && <ErrorMessage>{error}</ErrorMessage>}
<InputRow>
<ScreenReaderOnly>
<label htmlFor={inputId}>
Constraint Value
</label>
</ScreenReaderOnly>
<StyledTextField
id={inputId}
placeholder='Enter value'
value={inputValues}
onChange={(e) => {
setInputValues(e.target.value);
setError('');
}}
onKeyPress={handleKeyPress}
size='small'
variant='standard'
fullWidth
inputRef={inputRef}
autoFocus
/>
<Button
variant='text'
type='submit'
color='primary'
onClick={handleAdd}
disabled={!inputValues.trim()}
>
Add
</Button>
</InputRow>
</div>
</form>
</StyledPopover>
</>
);