Fixed: Unable to close indexer category select input on mobile
Closes #4296
This commit is contained in:
parent
88ad6f9544
commit
e42d1af5ff
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -54,4 +54,8 @@
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,7 +12,9 @@ class EnhancedSelectInputOption extends Component {
|
||||||
//
|
//
|
||||||
// Listeners
|
// Listeners
|
||||||
|
|
||||||
onPress = () => {
|
onPress = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
id,
|
id,
|
||||||
onSelect
|
onSelect
|
||||||
|
|
Loading…
Reference in New Issue