Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-25234

Submitting the macro dialog with an empty required parameter displayed with a suggest picker gives no visible feedback

    XMLWordPrintable

Details

    • Unknown

    Description

      Steps to reproduce

      1. Edit a page with the WYSIWYG editor and insert a macro that has a required parameter displayed with a suggest picker (Tom Select), for instance the User Avatar macro and its Username parameter.
      2. Leave that parameter empty and click Submit.

      Expected

      As for a required parameter displayed with a plain text input (e.g. Name of the Id macro): the field is outlined in red and gets the focus, so the user understands why the dialog does not close.

      Actual

      Nothing visible happens: the dialog stays open, the field is not outlined, and the caret is not in the picker. The user has no clue why Submit does nothing.

      The include macro is affected too: its required Reference group gets the red dashed outline, but the focus is lost the same way.

      Cause

      On submit, macroEditor.js (validate) adds has-error to the first empty required parameter for one second and focuses its first input that jQuery does not consider :hidden:

      • Focus: Tom Select hides the original select / input with the ts-hidden-accessible class, which clips it instead of setting display: none. jQuery therefore considers it visible, so it is that invisible element that gets the focus, not the Tom Select control. Selectize, which Tom Select replaced in 18.2.0 (XWIKI-24088), hid the original element with display: none.
      • Outline: the Bootstrap has-error styles apply to .form-control, not to the Tom Select control (.ts-control).

      Observed on 18.9.0-SNAPSHOT with Chromium, by checking document.activeElement 150ms after clicking Submit:

      • Id macro: INPUT#parameter-name
      • User Avatar macro: SELECT#parameter-username.tomselected.ts-hidden-accessible
      • Include macro: INPUT#parameter-reference.tomselected.ts-hidden-accessible

      Suggested fix

      In macroEditor.js, skip the .ts-hidden-accessible elements when choosing the input to focus (focusing the Tom Select control then also opens its dropdown), and style .has-error .ts-control like .has-error .form-control.

      Attachments

        1. IdUX-after150ms.png
          55 kB
          Manuel Leduc
        2. UserAvatarUX-after150ms.png
          66 kB
          Manuel Leduc

        Issue Links

          Activity

            People

              Unassigned Unassigned
              mleduc Manuel Leduc
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

                Created:
                Updated: