Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-11-10 01:19:53 +01:00
Code Issues Projects Releases Wiki Activity

chore: allow backdrop click through on AddValuesPopover (#10214)

Browse Source 
Follow-up to: https://github.com/Unleash/unleash/pull/10213

This makes our `AddValuesPopover` backdrop click-through. This means you
can interact with any element in the "background" right away and it will
work, while closing the popover at the same time.

If this works well it may be worth extracting to a reusable
ClickThroughPopover or similar.
This commit is contained in:
Nuno Góis 2025-06-30 08:14:23 +01:00 committed by GitHub
parent 28caa82ad1
commit c5ddcdbc3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 64 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/AddValuesPopover.tsx
View File

@ -1,5 +1,6 @@
import { import {
Button, Button,
ClickAwayListener,
type InputBaseComponentProps, type InputBaseComponentProps,
Popover, Popover,
styled, styled,
@ -15,6 +16,14 @@ const StyledPopover = styled(Popover)(({ theme }) => ({
padding: theme.spacing(2), padding: theme.spacing(2),
width: '250px', width: '250px',
}, },
'&.MuiPopover-root': {
pointerEvents: 'none',
},
'& .MuiPopover-paper': {
pointerEvents: 'all',
},
})); }));
const StyledTextField = styled(TextField)(({ theme }) => ({ const StyledTextField = styled(TextField)(({ theme }) => ({
@ -92,59 +101,61 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
horizontal: 'left', horizontal: 'left',
}} }}
> >
<form <ClickAwayListener onClickAway={onClose}>
onSubmit={(e) => { <form
e.stopPropagation(); onSubmit={(e) => {
e.preventDefault(); e.stopPropagation();
if (!inputValue?.trim()) { e.preventDefault();
setError('Value cannot be empty or whitespace'); if (!inputValue?.trim()) {
return; setError('Value cannot be empty or whitespace');
} else { return;
onAdd(inputValue, { } else {
setError, onAdd(inputValue, {
clearInput: () => setInputValue(''), setError,
}); clearInput: () => setInputValue(''),
} });
}} }
> }}
<InputRow> >
<ScreenReaderOnly> <InputRow>
<label htmlFor={inputId}>Constraint Value</label> <ScreenReaderOnly>
</ScreenReaderOnly> <label htmlFor={inputId}>Constraint Value</label>
<StyledTextField </ScreenReaderOnly>
id={inputId} <StyledTextField
placeholder='Enter value' id={inputId}
value={inputValue} placeholder='Enter value'
onChange={(e) => { value={inputValue}
setInputValue(e.target.value); onChange={(e) => {
setError(''); setInputValue(e.target.value);
}} setError('');
size='small' }}
variant='standard' size='small'
fullWidth variant='standard'
inputRef={inputRef} fullWidth
autoFocus inputRef={inputRef}
error={!!error} autoFocus
helperText={error} error={!!error}
aria-describedby={helpTextId} helperText={error}
inputProps={{ aria-describedby={helpTextId}
...inputProps, inputProps={{
}} ...inputProps,
data-testid='CONSTRAINT_VALUES_INPUT' }}
/> data-testid='CONSTRAINT_VALUES_INPUT'
<AddButton />
variant='text' <AddButton
type='submit' variant='text'
size='small' type='submit'
color='primary' size='small'
disabled={!inputValue?.trim()} color='primary'
data-testid='CONSTRAINT_VALUES_ADD_BUTTON' disabled={!inputValue?.trim()}
> data-testid='CONSTRAINT_VALUES_ADD_BUTTON'
Add >
</AddButton> Add
</InputRow> </AddButton>
<HelpText id={helpTextId}>{helpText}</HelpText> </InputRow>
</form> <HelpText id={helpTextId}>{helpText}</HelpText>
</form>
</ClickAwayListener>
</StyledPopover> </StyledPopover>
); );
}; };