Hello,

Thank you for bringing this describe behavior to our attention. From your description, it seems the exception is occurring because event.key is undefined when a form filler is used with the IgxAutocompleteDirective. This behavior can happen if the form filler triggers events that don't follow the typical keyboard event pattern, leading to the error when the method attempts to use event.key.toLowerCase().

To address this, one approach would be to modify the handleKeyDown method to ensure that it checks for the existence of event.key before trying to access it. Here’s an example of how this could be handled:

handleKeyDown(event) {
    if (!this.collapsed && !this._composing) {
        // Safeguard to check if event.key is defined before accessing it
        if (event.key) {
            switch (event.key.toLowerCase()) {
                // Handle different key cases here
            }
        }
    }
}

By adding this safeguard, we can prevent the application from throwing an exception when the form filler interacts with the IgxAutocompleteDirective.

If this not helped, to better understand and investigate the describe behavior in your specific context, could you please provide the following:

• A more detailed explanation of how and when the describe behavior occurs in your application.
• Any relevant code snippets where the autocomplete control is being used, especially in relation to form fillers.
• Screenshots or video recordings showing the issue, if available.

Additionally, the best approach would be to provide an isolated sample that reproduces the scenario, along with step-by-step instructions. This will allow us to thoroughly examine the behavior and work towards a more robust solution.

We look forward to receiving more information to assist you further and provide a targeted fix.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

<form [formGroup]="form">

  <div style="padding: 1rem">

    <igx-input-group class="autocomplete">

      <label igxLabel for="position">Position</label>

      <input

        igxInput

        name="position"

        type="text"

        [igxAutocomplete]="positionPanel"

        formControlName="position"

        (keydown)="handleKeyDown($event)"

      />

    </igx-input-group>

    <igx-drop-down #positionPanel maxHeight="300px">

      <igx-drop-down-item

        *ngFor="

          let option of options | startsWith : form.get('position')?.value || ''

        "

        [value]="option"

      >

        {{ option }}

      </igx-drop-down-item>

    </igx-drop-down>

  </div>

 

  <div style="padding: 1rem">

    <igx-input-group>

      <input igxInput name="fullName" type="text" formControlName="fullName" />

      <label igxLabel for="fullName">Full Name</label>

    </igx-input-group>

  </div>

 

  <div style="padding: 1rem">

    <igx-input-group>

      <input igxInput name="phone" type="text" formControlName="phone" />

      <label igxLabel for="phone">Phone</label>

    </igx-input-group>

  </div>

</form>

export class AutoCompleteComponent {

  public form: FormGroup;

  public options = ['Developer', 'Manager', 'Designer', 'Analyst'];

  public positionSelected: string;

 

  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      position: [''],

      fullName: [''],

      phone: [''],

    });

  }

 

  handleKeyDown(event: KeyboardEvent) {

    if (event.key) {

      console.log(`Key pressed: ${event.key}`);

    } else {

      console.error('Undefined event.key detected');

    }

  }

}

 

@Pipe({

  name: 'startsWith'

})

export class AutocompletePipeStartsWith implements PipeTransform {

  transform(options: string[], searchText: string | null): string[] {

    if (!searchText) {

      return options;

    }

    return options.filter(option =>

      option.toLowerCase().startsWith(searchText.toString().toLowerCase())

    );

  }

}

To further assist, I’ve provided a live StackBlitz sample for your reference.

Since I couldn’t reproduce the issue, having an isolated sample from your environment would be the best approach to move forward. This allows me to directly debug the exact code you’re working with, observe the same behavior, and pinpoint any discrepancies. Alternatively, if you could modify my provided sample to exhibit the behavior, I’d have a concrete setup to investigate.

In summary, please provide:

1. An isolated sample, if possible, showcasing the exact scenario.
2. Any additional steps or settings that may contribute to this behavior.
3. Code snippets or configurations, visuals, or any unique setup affecting the directive’s behavior.

With this, I’ll be able to narrow down on the cause effectively and work towards a solution that addresses your exact needs.

Looking forward to receiving this information to help resolve the issue as promptly as possible.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

I have logged this as an issue in our Ignite UI for Angular repository, and you can view it here.

Please feel free to subscribe to the issue or add it to your watch list for updates. Our development team will review, examine, and discuss the issue in detail, and any new information or potential fixes will be provided there.

Thank you for your patience and support as we work to resolve this.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics