Steps to reproduce
- 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 Records macro (XWIKI-24831) and its Object type parameter.
- 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
- Records macro: SELECT#parameter-class.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. |
