Adding a Click Event to a ComboBox in Vue

Background

The ComboBox control allows users to select an item from a dropdown list. To perform a custom action when a user clicks the control, attach a native JavaScript click event listener to its hostElement.

Use the ComboBox’s initialized callback to access the control and register the listener after initialization.

Steps to Complete

1. Import the ComboBox component and styles.
2. Register the click listener during initialization.
3. Create the ComboBox in the template.

Getting Started

Import the ComboBox component and styles

<script setup>
import { onBeforeUnmount } from 'vue';
import { WjComboBox } from '@mescius/wijmo.vue2.input';
import '@mescius/wijmo.styles/wijmo.css';

const countries = ['US', 'Germany', 'UK', 'Japan'];

let comboBoxHost = null;

...
</script>

• This example uses Vue 3’s Composition API. Importing WjComboBox inside <script setup> makes it available in the template. The countries array supplies the dropdown items, and the stylesheet provides the control’s default appearance.

Register the click listener during initialization

comboBoxHost = comboBox.hostElement;
comboBoxHost.addEventListener(
  'click',
  handleClick,
  true
);

• The hostElement property provides access to the DOM element that hosts the ComboBox. The third argument, true, registers the listener for the capture phase, allowing it to receive clicks as they travel toward elements inside the control.
• The handleClick function logs a message to the browser console. Replace this message with the action your application needs to perform.
• The onBeforeUnmount hook removes the listener before the Vue component is unmounted, using the same handler and capture setting supplied during registration.

Create the ComboBox in the template

<template>
  <wj-combo-box
    :items-source="countries"
    :initialized="initializeComboBox"
  />
</template>

• The items-source binding supplies the dropdown items. The initialized callback receives the ComboBox instance and registers its click listener.

Complete File

<template>
  <wj-combo-box
    :items-source="countries"
    :initialized="initializeComboBox"
  />
</template>

<script setup>
import { onBeforeUnmount } from 'vue';
import { WjComboBox } from '@mescius/wijmo.vue2.input';
import '@mescius/wijmo.styles/wijmo.css';

const countries = ['US', 'Germany', 'UK', 'Japan'];

let comboBoxHost = null;

function handleClick() {
  console.log('ComboBox clicked');
}

function removeClickListener() {
  if (comboBoxHost) {
    comboBoxHost.removeEventListener(
      'click',
      handleClick,
      true
    );

    comboBoxHost = null;
  }
}

function initializeComboBox(comboBox) {
  removeClickListener();

  comboBoxHost = comboBox.hostElement;
  comboBoxHost.addEventListener(
    'click',
    handleClick,
    true
  );
}

onBeforeUnmount(removeClickListener);
</script>

• This listener handles clicks within the ComboBox’s host element, including its input and dropdown button. It does not indicate that the selected item changed. Use selectedIndexChanged when your action should respond to a selection change.

With this setup, the ComboBox responds to clicks through a native JavaScript event listener attached to its host element, allowing you to perform custom actions when users interact with the control.

Happy coding!