mirror of https://github.com/apache/superset.git
fix(react-select): FilterBox focus event and adhoc filter popup height (#9933)
* fix(react-select): FilterBox focus event and adhoc filter popup height * Fix flacky cypress test * Use focus instead of click
This commit is contained in:
parent
1b72907b18
commit
359ea8825d
|
@ -53,12 +53,34 @@ export default () =>
|
|||
});
|
||||
|
||||
it('should apply filter', () => {
|
||||
cy.get('.Select__control')
|
||||
.contains('Select [region]')
|
||||
.click({ force: true });
|
||||
cy.get('.Select__control input[type=text]').first().focus();
|
||||
|
||||
// should open the filter indicator
|
||||
cy.get('.filter-indicator.active')
|
||||
.should('be.visible')
|
||||
.should(nodes => {
|
||||
expect(nodes).to.have.length(9);
|
||||
});
|
||||
|
||||
cy.get('.Select__control input[type=text]').first().blur();
|
||||
|
||||
// should hide the filter indicator
|
||||
cy.get('.filter-indicator')
|
||||
.not('.active')
|
||||
.should(nodes => {
|
||||
expect(nodes).to.have.length(18);
|
||||
});
|
||||
|
||||
cy.get('.Select__control input[type=text]')
|
||||
.first()
|
||||
.type('South Asia{enter}', { force: true });
|
||||
.focus({ force: true })
|
||||
.type('South Asia', { force: true });
|
||||
|
||||
// type text and <Enter> separately to reduce the change of failing tests
|
||||
cy.get('.Select__control input[type=text]')
|
||||
.first()
|
||||
.focus({ force: true })
|
||||
.type('{enter}', { force: true });
|
||||
|
||||
// wait again after applied filters
|
||||
cy.wait(aliases.filter(x => x !== getAlias(filterId))).then(requests => {
|
||||
|
|
|
@ -204,7 +204,7 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
|
|||
const { wrapper, onHeightChange } = setup();
|
||||
|
||||
wrapper.instance().multiComparatorComponent = {
|
||||
_selectRef: { select: { control: { clientHeight: 57 } } },
|
||||
select: { select: { controlRef: { clientHeight: 57 } } },
|
||||
};
|
||||
wrapper.instance().handleMultiComparatorInputHeightChange();
|
||||
|
||||
|
|
|
@ -192,11 +192,8 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
|
|||
|
||||
handleMultiComparatorInputHeightChange() {
|
||||
if (this.multiComparatorComponent) {
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
const multiComparatorDOMNode =
|
||||
this.multiComparatorComponent._selectRef &&
|
||||
this.multiComparatorComponent._selectRef.select &&
|
||||
this.multiComparatorComponent._selectRef.select.control;
|
||||
const multiComparatorDOMNode = this.multiComparatorComponent?.select
|
||||
?.select.controlRef;
|
||||
if (multiComparatorDOMNode) {
|
||||
if (
|
||||
multiComparatorDOMNode.clientHeight !==
|
||||
|
|
|
@ -100,18 +100,22 @@ class FilterBox extends React.Component {
|
|||
// this flag is used by non-instant filter, to make the apply button enabled/disabled
|
||||
hasChanged: false,
|
||||
};
|
||||
this.onFilterMenuClose = () => {
|
||||
this.props.onFilterMenuClose();
|
||||
};
|
||||
this.onFilterMenuOpen = (...args) => {
|
||||
return this.props.onFilterMenuOpen(this.props.chartId, ...args);
|
||||
};
|
||||
this.onOpenDateFilterControl = (...args) => {
|
||||
return this.onFilterMenuOpen(TIME_RANGE, ...args);
|
||||
};
|
||||
this.onFocus = this.onFilterMenuOpen;
|
||||
this.onBlur = this.onFilterMenuClose;
|
||||
this.changeFilter = this.changeFilter.bind(this);
|
||||
this.onFilterMenuOpen = this.onFilterMenuOpen.bind(this);
|
||||
this.onOpenDateFilterControl = this.onOpenDateFilterControl.bind(this);
|
||||
this.onFilterMenuClose = this.onFilterMenuClose.bind(this);
|
||||
}
|
||||
|
||||
onFilterMenuOpen(column) {
|
||||
return this.props.onFilterMenuOpen(this.props.chartId, column);
|
||||
}
|
||||
|
||||
onOpenDateFilterControl() {
|
||||
return this.onFilterMenuOpen(TIME_RANGE);
|
||||
}
|
||||
|
||||
onFilterMenuClose() {
|
||||
return this.props.onFilterMenuClose(this.props.chartId);
|
||||
}
|
||||
|
||||
getControlData(controlName) {
|
||||
|
@ -170,8 +174,8 @@ class FilterBox extends React.Component {
|
|||
name={TIME_RANGE}
|
||||
label={label}
|
||||
description={t('Select start and end date')}
|
||||
onChange={(...args) => {
|
||||
this.changeFilter(TIME_RANGE, ...args);
|
||||
onChange={newValue => {
|
||||
this.changeFilter(TIME_RANGE, newValue);
|
||||
}}
|
||||
onOpenDateFilterControl={this.onOpenDateFilterControl}
|
||||
onCloseDateFilterControl={this.onFilterMenuClose}
|
||||
|
@ -282,15 +286,11 @@ class FilterBox extends React.Component {
|
|||
const style = { backgroundImage };
|
||||
return { value: opt.id, label: opt.id, style };
|
||||
})}
|
||||
onChange={(...args) => {
|
||||
this.changeFilter(key, ...args);
|
||||
}}
|
||||
onFocus={this.onFocus}
|
||||
onBlur={this.onBlur}
|
||||
onOpen={(...args) => {
|
||||
this.onFilterMenuOpen(key, ...args);
|
||||
}}
|
||||
onClose={this.onFilterMenuClose}
|
||||
onChange={newValue => this.changeFilter(key, newValue)}
|
||||
onFocus={() => this.onFilterMenuOpen(key)}
|
||||
onMenuOpen={() => this.onFilterMenuOpen(key)}
|
||||
onBlur={this.onFilterMenuClose}
|
||||
onMenuClose={this.onFilterMenuClose}
|
||||
selectComponent={CreatableSelect}
|
||||
noResultsText={t('No results found')}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue