We have a control using IgxAutocompleteDirective on a form with other text fields.
When the user selects a form filler field for one of the other text fields, auto-complete throws an exception in this method
handleKeyDown(event) { if (!this.collapsed && !this._composing) { switch (event.key.toLowerCase()) {
because event.key is not defined.
This is causing significant issues in our application and requires us to try to inform our users not to use form filling.
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:
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
This is YOUR code, not our code. The code that is throwing the exception is in IgxAutocompleteDirective which is owned and maintained by Infragistics.
So you are correct, YOUR code does need to be fixed to handle this scenario.
Please let us know when we can let our customers know this will be fixed by Infragistics.
Thank you for your response. To thoroughly investigate this behavior, I created a dedicated sample that mimics the scenario you described as closely as possible, based on the limited information provided. Despite this effort, I couldn’t reproduce the issue—everything is working perfectly in the provided sample. Here's the sample code I used:
<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>
Here's the accompanying TypeScript code:
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()) ); } }
The described scenario could be observed here:
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:
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.
This is because you aren't catching and reporting exceptions. We have a global angular exception handler in place and it reports this exception.
If you look in the console while running your sample application in Edge, you will see this error after selecting a form filler value
This is the exception from the directive.
Thank you for providing the additional information and details regarding the issue. With this new insight, I was able to observe the described behavior and successfully reproduce the issue. This information has been invaluable in pinpointing the cause of the error.
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.