fix: FilterBox Select should be Creatable (#9940)

* bugfix: FilterBox Select should be Creatable

* Fix Cypress test
This commit is contained in:
Jesse Yang 2020-05-28 14:51:51 -07:00 committed by GitHub
parent b296a0f250
commit 4fe6f4f38e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 828 additions and 1104 deletions

View File

@ -74,13 +74,16 @@ export default () =>
cy.get('.Select__control input[type=text]')
.first()
.focus({ force: true })
.type('South Asia', { force: true });
.type('So', { force: true });
// type text and <Enter> separately to reduce the change of failing tests
cy.get('.Select__menu').first().contains('Create "So"');
// Somehow Input loses focus after typing "So" while in Cypress, so
// we refocus the input again here. The is not happening in real life.
cy.get('.Select__control input[type=text]')
.first()
.focus({ force: true })
.type('{enter}', { force: true });
.type('uth Asia{enter}', { force: true });
// wait again after applied filters
cy.wait(aliases.filter(x => x !== getAlias(filterId))).then(requests => {

File diff suppressed because it is too large Load Diff

View File

@ -10,10 +10,10 @@
"license": "Apache-2.0",
"dependencies": {
"shortid": "^2.2.15",
"@cypress/code-coverage": "^3.1.0"
"@cypress/code-coverage": "^3.7.6"
},
"devDependencies": {
"cypress": "4.3.0",
"eslint-plugin-cypress": "^2.10.3"
"cypress": "4.7.0",
"eslint-plugin-cypress": "^2.11.1"
}
}

View File

@ -270,12 +270,13 @@ class FilterBox extends React.Component {
value = filterConfig[FILTER_CONFIG_ATTRIBUTES.DEFAULT_VALUE];
}
}
return (
<OnPasteSelect
key={key}
placeholder={t('Select [%s]', label)}
isMulti={filterConfig[FILTER_CONFIG_ATTRIBUTES.MULTIPLE]}
clearable={filterConfig.clearable}
isClearable={filterConfig.clearable}
value={value}
options={data
.filter(opt => opt.id !== null)
@ -286,12 +287,17 @@ class FilterBox extends React.Component {
const style = { backgroundImage };
return { value: opt.id, label: opt.id, style };
})}
onChange={newValue => this.changeFilter(key, newValue)}
onChange={newValue => {
// avoid excessive re-renders
if (newValue !== value) {
this.changeFilter(key, newValue);
}
}}
onFocus={() => this.onFilterMenuOpen(key)}
onMenuOpen={() => this.onFilterMenuOpen(key)}
onBlur={this.onFilterMenuClose}
onMenuClose={this.onFilterMenuClose}
selectComponent={CreatableSelect}
selectWrap={CreatableSelect}
noResultsText={t('No results found')}
/>
);