feat: 🎸 new component inputSearch, now you can use the x to clean input value

src/components/Input.svelte

@@ -44,8 +44,21 @@
     {pattern}
     on:change
     on:input={handleInput}
+    on:focus={() => { dispatch('focus'); }}
+    on:blur={() => { dispatch('blur'); }}
     class={`w-full ${
       icon ? 'pl-12' : 'pl-4'
     } min-h-full pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none`}
   />
 </div>
+
+<style lang="postcss">
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration, 
+  input[type="search"]::-webkit-search-results-button, 
+  input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+  }
+</style>
+

src/components/InputSearch.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { mdiClose } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+
+  import Icon from './Icon.svelte';
+  import Input from './Input.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let className = '';
+  export let placeholder = '';
+  export let value = '';
+
+  let showInputButtonCancel = false;
+
+  function cleanFilter() {
+    value = '';
+    const element = document.querySelector('.input-search-component input');
+    setTimeout(() => { element.focus(); }, 100);
+
+    dispatch('input');
+  }
+
+  function validateInputButtonCancel(event) {
+    if (event.type === 'focus') { showInputButtonCancel = true }
+    else if (nameFilter === '') setTimeout(() => { showInputButtonCancel = false }, 100);
+
+    dispatch(event.type);
+  }
+</script>
+
+<div class="flex-1 relative">
+  <Input
+    className="input-search-component {className}"
+    type="search"
+    {placeholder}
+    on:input={() => { dispatch('input'); }}
+    on:focus={validateInputButtonCancel}
+    on:blur={validateInputButtonCancel}
+    bind:value={value}
+  />
+  {#if showInputButtonCancel}
+    <span 
+      on:click={cleanFilter}
+      aria-hidden="true"
+      class="w-12 h-12 flex justify-center items-center absolute right-[0.6rem] top-[0.3rem] cursor-pointer"
+    >
+      <Icon size="0.85" path={mdiClose} color="white"/>
+    </span>
+  {/if}
+</div>

src/routes/achievement/index.svelte

@@ -14,6 +14,7 @@
   import { readSave, updateSave, fromRemote } from '../../stores/saveManager';
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
+  import InputSearch from '../../components/InputSearch.svelte';
   import Select from '../../components/Select.svelte';
   import { pushToast } from '../../stores/toast';
   import Ad from '../../components/Ad.svelte';
@@ -406,19 +407,12 @@
       </div>
     </div>
     {#if showFilter}
-      <div class="mb-2 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
-        <div
-          class="flex flex-1 relative items-center bg-background rounded-2xl h-14
-       focus-within:border-primary border-2 border-transparent ease-in duration-100"
-          style="min-height: 3.5rem;"
-        >
-          <input
-            placeholder={$t('achievement.search')}
-            on:input={search}
-            bind:value={nameFilter}
-            class="pl-4 w-full min-h-full pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none"
-          />
-        </div>
+      <div class="mb-2 flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-2">
+        <InputSearch
+          placeholder={$t('achievement.search')} 
+          on:input={search}
+          bind:value={nameFilter}
+        />
         <Select
           multiselect
           options={versions}
@@ -440,6 +434,7 @@
     <div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
       <div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
         {#each categories as category, index (category.id)}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
             class="rounded-xl p-2 cursor-pointer flex flex-col {category.id === active ? 'bg-primary' : 'bg-item'}"
             on:click={() => changeCategory(category.id, index)}