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:
parent
b1fc4d60fc
commit
77d72ce5a1
@ -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>
|
||||
</>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user