Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4075

Combobox browser inconsistent autocomplete behavior

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 8.6.1
    • 8.5.2.1
    • Components
    • Security Level: Jimmy

      Steps to Reproduce

      <combobox autodrop="true" autocomplete="true">
      <comboitem label="牛肉麵"/>
      <comboitem label="牛肉湯"/>
      <comboitem label="牛肉湯麵"/>
      <comboitem label="德強苑"/>
      </combobox>

      e.g. using pinyin input type

      niu[space]rou

      Current Result

      Chome: creates duplicate characters (trying to edit the whole phrase later produces more duplicates)

      Edge: the autocompletion appends the first matched comboitem too eagerly, messing up the current cursor position (not selected so that subsequent characters are typed in the middle of the word)

      FF: appends the autocompleted value after the whole phrase is committed ... without interfering while typing (expected)

      IE11: autocompletion happens slightly earlier after each character but not interfering with the input method (the autocompleted chars remain seelcted allowing override by additional chars)

      Expected Result

      FF or IE behavior (only keep the actually typed characters, no duplicates, auto-appended characters need to be overridden when continuing to type)

      Debug Info

      when 倉頡/ 速成 is used :

      "德" is being inputted. The box will fill 德強苑
      the input sequence for "德" is 竹人十田心
      resulting in duplicates as well:

      Root Cause

      It seems like the key/input event sequences vary in browsers giving those inconsistent and erroneous results.

      Workaround

      the workaround uses the browserevents compositionstart/[compositionend|https://developer.mozilla.org/en-US/docs/Web/Events/compositionend] to suppress completion during special character input

        1. ime-combobox-patch-850.zul
          1 kB
        2. ie11.png
          ie11.png
          5 kB
        3. firefox.png
          firefox.png
          6 kB
        4. eager-autocomplete-in-edge.png
          eager-autocomplete-in-edge.png
          6 kB
        5. duplicate-char-in-chrome.png
          duplicate-char-in-chrome.png
          4 kB
        6. canjie-chrome.png
          canjie-chrome.png
          7 kB

            CharlesQiu CharlesQiu
            cor3000 cor3000
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 1 day
                1d
                Remaining:
                Time Spent - 6 hours Remaining Estimate - 2 hours
                2h
                Logged:
                Time Spent - 6 hours Remaining Estimate - 2 hours
                6h