feat: add custom filtering functionality to combobox component

Author: popadicbranislav

packages/components/src/components/combobox/combobox.e2e.ts

@@ -209,4 +209,26 @@ describe('scale-combobox', () => {
     // Verify no scaleChange event was emitted
     expect(scaleChangeEvent).not.toHaveReceivedEvent();
   });
+
+  it('respects custom filter function', async () => {
+    const page = await newE2EPage();
+    const html = `
+      <scale-combobox></scale-combobox>
+      <script>
+        const combobox = document.querySelector('scale-combobox');
+        combobox.options = ['test', 'estt', 'stte'];
+        combobox.filterFunction = (option, query) =>
+          option.toLowerCase().startsWith(query.toLowerCase());
+      </script>
+    `;
+    await page.setContent(html);
+    const input = await page.find('scale-combobox >>> .combobox-input');
+    await input.focus();
+    await input.type('st');
+    await page.waitForTimeout(100);
+    const options = await page.findAll('scale-combobox >>> .combobox-option');
+    // Should only show React due to custom filter function
+    expect(options.length).toBeLessThanOrEqual(1);
+    expect(options[0]).toEqualText('stte');
+  });
 });

packages/components/src/components/combobox/combobox.tsx

@@ -38,7 +38,7 @@ export class Combobox {
   @Prop() options: string[] = [];
 
   /** Current selected value */
-  @Prop({mutable: true}) value?: string = '';
+  @Prop({ mutable: true }) value?: string = '';
 
   /** Whether the combobox is disabled */
   @Prop() disabled?: boolean = false;
@@ -52,6 +52,28 @@ export class Combobox {
   /** Invalid state */
   @Prop() invalid?: boolean = false;
 
+  /** Custom filtering function */
+  @Prop() filterFunction?: (option: string, query: string) => boolean;
+
+  @Watch('filterFunction')
+  validateFilterFunction(customFilterFn: any) {
+    if (!customFilterFn) return false;
+
+    if (typeof customFilterFn !== 'function') {
+      throw new Error(
+        'scale-combobox: The provided filterFunction prop is not a valid function. Falling back to default filtering behavior.'
+      );
+    }
+
+    // Check the return type by executing the funciton with simple paylaod
+    const testResult = customFilterFn('test option', 'test query');
+    if (typeof testResult !== 'boolean') {
+      throw new Error(
+        'scale-combobox: The provided filterFunction prop does not return a boolean value. Falling back to default filtering behavior.'
+      );
+    }
+  }
+
   @State() isOpen = false;
   @State() filteredOptions: string[] = [];
   @State() highlightedIndex = -1;
@@ -220,11 +242,13 @@ export class Combobox {
 
   private filterOptions(query: string) {
     const filtered = this.options.filter((option) =>
-      option.toLowerCase().includes(query.toLowerCase())
+      this.filterFunction
+        ? this.filterFunction(option, query)
+        : option.toLowerCase().includes(query.toLowerCase())
     );
     this.filteredOptions = filtered;
     this.highlightedIndex = -1;
-    
+
     // Update listbox position when filtered options change (dropdown size changes)
     if (this.isOpen) {
       setTimeout(() => {

packages/components/src/html/combobox.html

@@ -111,6 +111,19 @@ <h2>Invalid Combobox</h2>
       </div>
     </div>
 
+    <!-- Custom Filtering Example -->
+    <div class="example">
+      <h2>Combobox with Custom Filtering</h2>
+      <p class="description">
+        Implement custom filtering logic to control which options are displayed.
+      </p>
+      <scale-combobox
+        id="custom-filter-combobox"
+        label="Select a framework"
+        placeholder="Type or select..."
+      ></scale-combobox>
+    </div>
+
     <script>
       // Framework options
       const frameworks = [
@@ -160,6 +173,18 @@ <h2>Invalid Combobox</h2>
       // Disabled combobox setup
       const disabledCombobox = document.getElementById('disabled-combobox');
       disabledCombobox.options = ['Option 1', 'Option 2', 'Option 3'];
+
+      // Custom filter combobox setup
+      const customFilterCombobox = document.getElementById(
+        'custom-filter-combobox'
+      );
+      customFilterCombobox.options = frameworks;
+      customFilterCombobox.filterFunction = (option, query) =>
+        option.toLowerCase().startsWith(query.toLowerCase());
+
+      customFilterCombobox.addEventListener('scaleChange', (e) => {
+        console.log('Custom filter combobox changed:', e.detail.value);
+      });
     </script>
   </body>
 </html>