Blur Event Returns Undefined

Hi,

When using the Syncfusion <combo-box-component> in our Vue application, the @blur event handler receives undefined as its event parameter. This prevents us from accessing the native blur event or any useful event data within our handler.

Steps to Reproduce:

  1. Add a <combo-box-component @blur="onBlur" ... /> to a Vue template.
  2. In the onBlur method, log the event parameter:

onBlur(event) {

  console.log('Blur event:', event); // Always logs 'undefined'

}

      3. Trigger a blur on the ComboBox.

Expected Behavior:

The onBlur handler should receive a native event object or a useful payload, similar to standard Vue or HTML input blur events.


Actual Behavior:

The event parameter is always undefined.


Impact:

We are unable to access event details or the input element, which limits our ability to implement custom blur logic.


Request:

Please clarify if this is the intended behavior. If not, can the component be updated to emit a useful event object on blur? If there is a workaround to access the native event, please provide guidance.

Best Regards,
Youssef 


1 Reply

PK Priyanka Karthikeyan Syncfusion Team May 22, 2025 03:01 PM UTC

Hi Youssef Juma,


Thank you for reaching out to us.

 

We would like to inform you that it is expected behavior for the blur event not to provide detailed event arguments such as the selected value. This behavior is consistent across the ComboBox and other Syncfusion form components.

 

If you need to access any property values from the ComboBox instance during the blur event, we recommend using a component reference (ref) to retrieve them. Here's a sample approach:

 

 onBlur(event) {

    const comboBoxInstance = this.$refs.comboRef.ej2Instances;

    console.log('Current value:', comboBoxInstance.value)

  }

 

Sample: https://stackblitz.com/edit/nxefwbq6-6nx9ffgg?file=src%2FApp.vue,package.json

 

Alternatively, if you would prefer to get the selected value directly from the event arguments, we recommend using the change event instead. This event provides more comprehensive details within its event object.

 

For further details, you may refer to our documentation:

 

API Reference: JavaScript ComboBox API control - Syncfusion

 

Please let us know if you have any further questions or need additional assistance.


Regards,

Priyanka K


Loader.
Up arrow icon