fix: Unresponsiveness of select inputs post-click
This commit is contained in:
@@ -63,7 +63,6 @@ const InputSelect = (props: Props) => {
|
|||||||
gutter: 0,
|
gutter: 0,
|
||||||
modal: true,
|
modal: true,
|
||||||
selectedValue: value,
|
selectedValue: value,
|
||||||
animated: 200,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const popOver = useSelectPopover({
|
const popOver = useSelectPopover({
|
||||||
@@ -180,13 +179,12 @@ const InputSelect = (props: Props) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{select.visible || select.animating
|
{select.visible
|
||||||
? options.map((option) => (
|
? options.map((option) => (
|
||||||
<StyledSelectOption
|
<StyledSelectOption
|
||||||
{...select}
|
{...select}
|
||||||
value={option.value}
|
value={option.value}
|
||||||
key={option.value}
|
key={option.value}
|
||||||
$animating={select.animating}
|
|
||||||
ref={
|
ref={
|
||||||
select.selectedValue === option.value
|
select.selectedValue === option.value
|
||||||
? selectedRef
|
? selectedRef
|
||||||
@@ -214,7 +212,7 @@ const InputSelect = (props: Props) => {
|
|||||||
</SelectPopover>
|
</SelectPopover>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
{note && <HelpText small>{note}</HelpText>}
|
{note && <HelpText small>{note}</HelpText>}
|
||||||
{(select.visible || select.animating) && <Backdrop />}
|
{select.visible && <Backdrop />}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -236,6 +234,10 @@ const StyledButton = styled(Button)<{ nude?: boolean }>`
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: ${(props) => props.theme.buttonNeutralBackground};
|
||||||
|
}
|
||||||
|
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.nude &&
|
props.nude &&
|
||||||
css`
|
css`
|
||||||
@@ -255,14 +257,8 @@ const StyledButton = styled(Button)<{ nude?: boolean }>`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const StyledSelectOption = styled(SelectOption)<{ $animating: boolean }>`
|
export const StyledSelectOption = styled(SelectOption)`
|
||||||
${MenuAnchorCSS}
|
${MenuAnchorCSS}
|
||||||
|
|
||||||
${(props) =>
|
|
||||||
props.$animating &&
|
|
||||||
css`
|
|
||||||
pointer-events: none;
|
|
||||||
`}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Wrapper = styled.label<{ short?: boolean }>`
|
const Wrapper = styled.label<{ short?: boolean }>`
|
||||||
|
|||||||
Reference in New Issue
Block a user