fix: Unresponsiveness of select inputs post-click

This commit is contained in:
Tom Moor
2022-01-05 20:10:51 -08:00
parent 3cee22da89
commit ece879b2cc

View File

@@ -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 }>`