Fixed: Unable to close indexer category select input on mobile

Closes #4296
This commit is contained in:
Mark McDowall 2021-02-09 17:32:41 -08:00
parent 88ad6f9544
commit e42d1af5ff
4 changed files with 38 additions and 1 deletions

View File

@ -85,3 +85,21 @@
display: inline-block; display: inline-block;
margin: 5px -5px 5px 0; margin: 5px -5px 5px 0;
} }
.mobileCloseButtonContainer {
display: flex;
justify-content: flex-end;
height: 40px;
border-bottom: 1px solid $borderColor;
}
.mobileCloseButton {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
&:hover {
color: $modalCloseButtonHoverColor;
}
}

View File

@ -9,6 +9,7 @@ import * as keyCodes from 'Utilities/Constants/keyCodes';
import { icons, sizes, scrollDirections } from 'Helpers/Props'; import { icons, sizes, scrollDirections } from 'Helpers/Props';
import Icon from 'Components/Icon'; import Icon from 'Components/Icon';
import Portal from 'Components/Portal'; import Portal from 'Components/Portal';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link'; import Link from 'Components/Link/Link';
import LoadingIndicator from 'Components/Loading/LoadingIndicator'; import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Measure from 'Components/Measure'; import Measure from 'Components/Measure';
@ -518,6 +519,18 @@ class EnhancedSelectInput extends Component {
scrollDirection={scrollDirections.NONE} scrollDirection={scrollDirections.NONE}
> >
<Scroller className={styles.optionsModalScroller}> <Scroller className={styles.optionsModalScroller}>
<div className={styles.mobileCloseButtonContainer}>
<Link
className={styles.mobileCloseButton}
onPress={this.onOptionsModalClose}
>
<Icon
name={icons.CLOSE}
size={18}
/>
</Link>
</div>
{ {
values.map((v, index) => { values.map((v, index) => {
const hasParent = v.parentKey !== undefined; const hasParent = v.parentKey !== undefined;

View File

@ -54,4 +54,8 @@
&:last-child { &:last-child {
border: none; border: none;
} }
&:hover {
background-color: unset;
}
} }

View File

@ -12,7 +12,9 @@ class EnhancedSelectInputOption extends Component {
// //
// Listeners // Listeners
onPress = () => { onPress = (e) => {
e.preventDefault();
const { const {
id, id,
onSelect onSelect