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