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

11
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,6 +101,7 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
horizontal: 'left', horizontal: 'left',
}} }}
> >
<ClickAwayListener onClickAway={onClose}>
<form <form
onSubmit={(e) => { onSubmit={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -145,6 +155,7 @@ export const AddValuesPopover: FC<AddValuesProps> = ({
</InputRow> </InputRow>
<HelpText id={helpTextId}>{helpText}</HelpText> <HelpText id={helpTextId}>{helpText}</HelpText>
</form> </form>
</ClickAwayListener>
</StyledPopover> </StyledPopover>
); );
}; };