fix(primeng): select filtering prop (#3856)

ngx-formly · May 12, 2024 · 67c6783 · 67c6783
1 parent 7942df4
commit 67c6783
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/demo/src/app/ui/ui-primeng/select/app.component.ts b/demo/src/app/ui/ui-primeng/select/app.component.ts
@@ -16,6 +16,7 @@ export class AppComponent {
       type: 'select',
       props: {
         label: 'Select',
+        filter: true,
         placeholder: 'Placeholder',
         description: 'Description',
         required: true,

diff --git a/src/ui/primeng/select/src/select.type.spec.ts b/src/ui/primeng/select/src/select.type.spec.ts
@@ -69,4 +69,31 @@ describe('ui-primeng: Select Type', () => {
     expect(field.formControl.value).toEqual(2);
     expect(changeSpy).toHaveBeenCalledOnce();
   });
+
+  it('should filter results on search', () => {
+    const { query, queryAll, fixture } = renderComponent({
+      key: 'name',
+      type: 'enum',
+      props: {
+        label: 'Select',
+        filter: true,
+        options: [
+          { value: 1, label: 'apple label' },
+          { value: 2, label: 'apple-pie label' },
+          { value: 3, label: 'pie label' },
+        ],
+      },
+    });
+
+    expect(query('formly-wrapper-primeng-form-field')).not.toBeNull();
+    const inputQuery = 'p-dropdown input.p-dropdown-filter';
+
+    query('p-dropdown div').triggerEventHandler('click', ɵCustomEvent({ isSameNode: () => false }));
+    expect(queryAll('p-dropdownItem')).toHaveLength(3);
+
+    query(inputQuery).triggerEventHandler('input', { target: { value: 'pie' } });
+    fixture.detectChanges();
+    expect(queryAll('p-dropdownItem')).toHaveLength(2);
+    expect(queryAll('p-dropdownItem>li')[0].nativeElement.textContent).toEqual('apple-pie label');
+  });
 });
diff --git a/src/ui/primeng/select/src/select.type.ts b/src/ui/primeng/select/src/select.type.ts
@@ -5,6 +5,7 @@ import { FormlyFieldSelectProps } from '@ngx-formly/core/select';
 
 interface SelectProps extends FormlyFieldProps, FormlyFieldSelectProps {
   appendTo?: any;
+  filter?: boolean;
 }
 
 export interface FormlySelectFieldConfig extends FormlyFieldConfig<SelectProps> {
@@ -21,6 +22,7 @@ export interface FormlySelectFieldConfig extends FormlyFieldConfig<SelectProps>
       [formlyAttributes]="field"
       [showClear]="!props.required"
       [appendTo]="props.appendTo"
+      [filter]="props.filter"
       (onChange)="props.change && props.change(field, $event)"
     >
     </p-dropdown>