Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Search component: Behavior and styling tweaks (https://github.com/woocommerce/woocommerce-admin/pull/5199) 

Fix visual issues with the <Search> component.
This commit is contained in:
Paul Dechov 2020-10-05 19:22:22 -04:00 committed by GitHub
parent 9906c6c1b3
commit 1bdd2ea0e1
3 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
plugins/woocommerce-admin/packages/components/src/select-control/index.js
View File

@ -220,7 +220,20 @@ export class SelectControl extends Component {
}
search( query ) {
this.setState( { query, isFocused: true } );
const searchOptions = this.searchOptions || [];
const filteredOptions =
query !== null && ! query.length && ! this.props.hideBeforeSearch
? searchOptions
: this.getFilteredOptions( searchOptions, query );
this.setState( {
query,
isFocused: true,
selectedIndex: 0,
filteredOptions,
isExpanded: Boolean( filteredOptions.length ),
} );
this.updateFilteredOptions( query );
}
@ -236,6 +249,8 @@ export class SelectControl extends Component {
return;
}
this.searchOptions = searchOptions;
// Get all options if `hideBeforeSearch` is enabled and query is not null.
const filteredOptions =
query !== null && ! query.length && ! hideBeforeSearch

1
plugins/woocommerce-admin/packages/components/src/select-control/style.scss
View File

@ -48,6 +48,7 @@
width: 100%;
line-height: 24px;
text-align: left;
letter-spacing: inherit;
background: transparent;
&::-webkit-search-cancel-button {

1
plugins/woocommerce-admin/packages/components/src/tag/style.scss
View File

@ -29,6 +29,7 @@
.woocommerce-tag__remove {
cursor: pointer;
height: inherit;
padding: 0 2px;
border-radius: 0 12px 12px 0;
color: $gray-700;