diff --git a/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx b/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx
index 005b28762..74ac96701 100644
--- a/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx
+++ b/superset/assets/spec/javascripts/explore/components/AdhocFilterEditPopoverSimpleTabContent_spec.jsx
@@ -43,15 +43,17 @@ const options = [
function setup(overrides) {
const onChange = sinon.spy();
+ const onHeightChange = sinon.spy();
const props = {
adhocFilter: simpleAdhocFilter,
onChange,
+ onHeightChange,
options,
datasource: {},
...overrides,
};
const wrapper = shallow();
- return { wrapper, onChange };
+ return { wrapper, onChange, onHeightChange };
}
describe('AdhocFilterEditPopoverSimpleTabContent', () => {
@@ -119,4 +121,15 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
expect(wrapper.instance().isOperatorRelevant('regex')).to.be.true;
expect(wrapper.instance().isOperatorRelevant('like')).to.be.false;
});
+
+ it('expands when its multi comparator input field expands', () => {
+ const { wrapper, onHeightChange } = setup();
+
+ wrapper.instance().multiComparatorComponent =
+ { _selectRef: { select: { control: { clientHeight: 57 } } } };
+ wrapper.instance().handleMultiComparatorInputHeightChange();
+
+ expect(onHeightChange.calledOnce).to.be.true;
+ expect(onHeightChange.lastCall.args[0]).to.equal(27);
+ });
});
diff --git a/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx b/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx
index 7439ab3ad..103ce2272 100644
--- a/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx
+++ b/superset/assets/src/explore/components/AdhocFilterEditPopover.jsx
@@ -32,6 +32,7 @@ export default class AdhocFilterEditPopover extends React.Component {
this.onMouseMove = this.onMouseMove.bind(this);
this.onMouseUp = this.onMouseUp.bind(this);
this.onAdhocFilterChange = this.onAdhocFilterChange.bind(this);
+ this.adjustHeight = this.adjustHeight.bind(this);
this.state = {
adhocFilter: this.props.adhocFilter,
@@ -78,6 +79,10 @@ export default class AdhocFilterEditPopover extends React.Component {
document.removeEventListener('mousemove', this.onMouseMove);
}
+ adjustHeight(heightDifference) {
+ this.setState(state => ({ height: state.height + heightDifference }));
+ }
+
render() {
const {
adhocFilter: propsAdhocFilter,
@@ -115,6 +120,7 @@ export default class AdhocFilterEditPopover extends React.Component {
onChange={this.onAdhocFilterChange}
options={this.props.options}
datasource={this.props.datasource}
+ onHeightChange={this.adjustHeight}
/>
{
diff --git a/superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx b/superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx
index b13fea1bd..b35da7101 100644
--- a/superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx
+++ b/superset/assets/src/explore/components/AdhocFilterEditPopoverSimpleTabContent.jsx
@@ -29,6 +29,7 @@ const propTypes = {
PropTypes.shape({ saved_metric_name: PropTypes.string.isRequired }),
adhocMetricType,
])).isRequired,
+ onHeightChange: PropTypes.func.isRequired,
datasource: PropTypes.object,
};
@@ -45,6 +46,8 @@ function translateOperator(operator) {
return operator;
}
+const SINGLE_LINE_SELECT_CONTROL_HEIGHT = 30;
+
export default class AdhocFilterEditPopoverSimpleTabContent extends React.Component {
constructor(props) {
super(props);
@@ -54,9 +57,11 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
this.onInputComparatorChange = this.onInputComparatorChange.bind(this);
this.isOperatorRelevant = this.isOperatorRelevant.bind(this);
this.refreshComparatorSuggestions = this.refreshComparatorSuggestions.bind(this);
+ this.multiComparatorRef = this.multiComparatorRef.bind(this);
this.state = {
suggestions: [],
+ multiComparatorHeight: SINGLE_LINE_SELECT_CONTROL_HEIGHT,
};
this.selectProps = {
@@ -73,10 +78,15 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
this.refreshComparatorSuggestions();
}
+ componentDidMount() {
+ this.handleMultiComparatorInputHeightChange();
+ }
+
componentDidUpdate(prevProps) {
if (prevProps.adhocFilter.subject !== this.props.adhocFilter.subject) {
this.refreshComparatorSuggestions();
}
+ this.handleMultiComparatorInputHeightChange();
}
onSubjectChange(option) {
@@ -127,6 +137,21 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
}));
}
+ handleMultiComparatorInputHeightChange() {
+ if (this.multiComparatorComponent) {
+ // eslint-disable-next-line no-underscore-dangle
+ const multiComparatorDOMNode = this.multiComparatorComponent._selectRef.select.control;
+ if (multiComparatorDOMNode) {
+ if (multiComparatorDOMNode.clientHeight !== this.state.multiComparatorHeight) {
+ this.props.onHeightChange((
+ multiComparatorDOMNode.clientHeight - this.state.multiComparatorHeight
+ ));
+ this.setState({ multiComparatorHeight: multiComparatorDOMNode.clientHeight });
+ }
+ }
+ }
+ }
+
refreshComparatorSuggestions() {
const datasource = this.props.datasource;
const col = this.props.adhocFilter.subject;
@@ -163,6 +188,12 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
}
}
+ multiComparatorRef(ref) {
+ if (ref) {
+ this.multiComparatorComponent = ref;
+ }
+ }
+
render() {
const { adhocFilter, options, datasource } = this.props;
@@ -238,6 +269,7 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
onChange={this.onComparatorChange}
showHeader={false}
noResultsText={t('type a value here')}
+ refFunc={this.multiComparatorRef}
/> :