on work

doc-app/tests/dummy/app/controllers/docs/ember-input/select-search.js

@@ -0,0 +1,27 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from 'tracked-built-ins';
+
+export default class DocsTpkSelectSearchController extends Controller {
+  @tracked options = ['BBQ', 'Ketchup', 'Dallas', 'Mustard'];
+  @tracked selected = '';
+
+  @action
+  selectElement() {
+    this.selected = 'Dallas';
+  }
+  Ò;
+  @action
+  onChange(value) {
+    console.log('Selected value:', value);
+    this.selected = value;
+  }
+
+  @action
+  onInput(e) {
+    console.log('Input value:', e.target.value);
+    this.options.filter((sauce) =>
+      sauce.toLowerCase.includes(e.target.value.toLowerCase),
+    );
+  }
+}

doc-app/tests/dummy/app/styles/ember-input/index.css

@@ -1,3 +1,4 @@
 @import url("radio.css");
 @import url("select.css");
 @import url("tpk-file.css");
+@import url("select-search.css");

doc-app/tests/dummy/app/styles/ember-input/select-search.css

@@ -0,0 +1,47 @@
+.tpk-select-search-container {
+  @apply pt-1;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.tpk-select-search .tpk-select-search-input,
+.tpk-select-search-input {
+  @apply text-stone-500 w-full -mt-1;
+}
+
+.tpk-select-search {
+  @apply relative;
+}
+
+.tpk-select-search input::placeholder {
+  @apply text-black;
+}
+
+.main-select-search .tpk-select-search::before {
+  content: "";
+
+  @apply absolute rounded flex top-[6px] right-[6px] w-[34px] h-[34px] items-center justify-center z-10;
+}
+
+.main-select-search .tpk-select-search::after {
+  content: "";
+
+  @apply absolute rounded flex top-[6px] right-[6px] bg-white w-[34px] h-[34px] items-center justify-center z-20;
+
+  mask-image: url("/assets/icons/search.svg");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -mask-position: center;
+  mask-size: 70%;
+}
+
+.tpk-select-search-options {
+  @apply w-full z-[60] hidden absolute shadow-lg max-h-60 rounded-md py-0.5  text-stone-500 ring-1 ring-opacity-5 overflow-auto focus:outline-none  mt-1;
+}
+
+.tpk-select-search[data-is-open="true"] .tpk-select-search-options {
+  @apply block bg-white text-stone-500 rounded-md;
+}
+
+.tpk-select-search-options-option {
+  @apply relative py-2 pl-3 text-stone-500 cursor-pointer select-none pr-9 hover:bg-blue-700 focus:outline-none focus-visible:border-blue-400/25;
+}

doc-app/tests/dummy/app/templates/docs/ember-input/select-search.md

@@ -1,3 +1,32 @@
 # Ember input/select search
 
 Ember input/select search content
+
+<DocsDemo as |demo|>
+  <demo.example @name="tpk-select-search.hbs">
+      <TpkSelectSearch
+      @label='Select something'
+      @options={{this.options}}
+      @onChange={{this.selectElement}}
+      @selected={{this.selected}}
+      class="tpk-select-search"
+      as |S|>
+        <S.Label />
+
+        <div class="tpk-select-search-container">
+          <S.Input @onInput={{this.onInput}} />
+          <S.Button>
+          <svg width="18" height="16" aria-hidden="true" focusable="false">
+            <polygon class="arrow" stroke-width="0" fill-opacity="0.75" fill="currentcolor" points="3,6 15,6 9,14"></polygon>
+          </svg>
+          </S.Button>
+        </div>
+        <S.Options as |Opts|>
+          <Opts as |opt|>
+          {{opt.option}}
+          </Opts>
+        </S.Options>
+      </TpkSelectSearch>
+  </demo.example>
+  <demo.snippet @name="tpk-select-search.hbs"/>
+</DocsDemo>

packages/ember-input/src/components/tpk-select-search.gts

@@ -256,6 +256,8 @@ export default class TpkSelectSearchComponent extends Component<TpkSelectSearchS
   @action
   onInput(e: Event) {
     this.isOpen = true;
+    console.log(e);
+
     this.args.onInput((e.target as HTMLInputElement).value);
   }
 
@@ -307,7 +309,7 @@ export default class TpkSelectSearchComponent extends Component<TpkSelectSearchS
       {{yield
         (hash
           Label=(component
-           TpkSelectSearchLabelComponent
+            TpkSelectSearchLabelComponent
             guid=this.guid
             classless=@classless
             label=@label