clear filter x

src/scss/sprites.scss

@@ -16,6 +16,7 @@ $scale: 4;
 // sprites from https://pokemondb.net/sprites
 // alolan sprites from https://www.pokecommunity.com/showthread.php?t=368703
 // TODO: check and update from https://github.com/ZeChrales/PogoAssets/tree/master/pixels
+// TODO: add missing forms from https://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_with_form_differences#In_other_languages
 .pokemon-001,
 .pokemon-002,
 .pokemon-003,

src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx

@@ -236,7 +236,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                             <i className={ pokemonIconCss } />
                             <h4 className={ styles.dexHeader }>No.{ dex }</h4>
                             { leaguePokemon.form &&
-                                <h6 className={ styles.formHeader }>{ leaguePokemon.form.toLowerCase().replace('_', ' ') } Forme</h6>
+                                <h6 className={ styles.formHeader }>{ leaguePokemon.form.toLowerCase().replace('_', ' ') } Form</h6>
                             }
                             <div className={ styles.pokemonTypeWrapper }>
                                 { type1 }

src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx

@@ -77,14 +77,22 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
 
         return (
             <div id="pokemon-select-list" className={ wrapperCss }>
-                <input
-                    name="filter"
-                    type="text"
-                    className={ inputTextCss }
-                    onChange={ this.handleChangeFilter }
-                    value={ this.props.filterTerm }
-                    placeholder="Pokemon Name"
-                />
+                <div className={ styles.filterWrapper }>
+                    <input
+                        name="filter"
+                        type="text"
+                        className={ inputTextCss }
+                        onChange={ this.handleChangeFilter }
+                        value={ this.props.filterTerm }
+                        placeholder="Pokemon Name"
+                    />
+                    { this.props.filterTerm !== '' &&
+                        <i
+                            className="nes-icon close is-small"
+                            onClick={ this.handleClickClearFilter }
+                        />
+                    }
+                </div>
                 <div className={ listWrapperCss }>
                     { listLength > 0 &&
                         <Measure
@@ -157,7 +165,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
                 <span>{ pokemon.name }</span>
                 <span className={ dexCss }>#{ dex }</span>
                 { pokemon.form &&
-                    <span className={ formCss }>{ pokemon.form.toLowerCase().replace('_', ' ') } Forme</span>
+                    <span className={ formCss }>{ pokemon.form.toLowerCase().replace('_', ' ') } Form</span>
                 }
             </a>
         );
@@ -171,4 +179,13 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
             }
         });
     }
+
+    private readonly handleClickClearFilter = () => {
+        this.props.handleChangeFilter('')
+        .then(() => {
+            if (this.listRef.current !== null) {
+                this.listRef.current.resetAfterIndex(0, true);
+            }
+        });
+    }
 }

src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss

@@ -36,9 +36,20 @@
   }
 }
 
+.filterWrapper {
+  position: relative;
+
+  :global(.close) {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+  }
+}
+
 .filterInput {
   margin-left: 0;
   margin-right: 0;
+  padding-right: 3em;
 }
 
 .dex,

src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts

@@ -4,6 +4,7 @@ export const dex: string;
 export const emptyList: string;
 export const emptyState: string;
 export const filterInput: string;
+export const filterWrapper: string;
 export const form: string;
 export const leftPanel: string;
 export const listWrapper: string;