Chips: Double letters when IME is enabled

[suntel-nagamine]

Describe the bug

When I enable IME (Input Method Editor) to input Japanese characters, the same character is doubled.

Is it possible to use the compositionstart and compositionend events for input to control the text so that it is not doubled?

Amendment

Chips.vue:

  data() {
    return {
      id: UniqueComponentId(),
      inputValue: null,
      focused: false,
      focusedIndex: null,
      isComposing: false,  // add
    };
  },
  // add
  mounted() {
    this.$refs.input.addEventListener("compositionstart", () => {
      this.isComposing = true;
    });
    this.$refs.input.addEventListener("compositionend", () => {
      this.isComposing = false;
    });
  },
  // add end

    onKeyDown(event) {
      const inputValue = event.target.value;

      switch (event.code) {
        case "Backspace":
          if (
            inputValue.length === 0 &&
            this.modelValue &&
            this.modelValue.length > 0
          ) {
            if (this.focusedIndex !== null) {
              this.removeItem(event, this.focusedIndex);
            } else this.removeItem(event, this.modelValue.length - 1);
          }
          break;

        case "Enter":
          if (inputValue && inputValue.trim().length && !this.maxedOut && !this.isComposing) {  // change
            this.addItem(event, inputValue, true);
          }

          break;

Reproducer

No response

PrimeVue version

3.16.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 105

Steps to reproduce the behavior

No response

Expected behavior

No response