|
| Fix Version: |
18.9.0-rc-1 |
| Fix Version: |
18.4.7 |
| Version: |
18.2.0-rc-1 |
| Version: |
18.2.0 |
| Description: |
h2. 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 User Avatar macro and its *Username* parameter.
# Leave that parameter empty and click { * } Submit { * } .
h2. 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.
h2. 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.
h2. 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}}
h2. 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 { }} } . |
| Component: |
Flamingo Skin |
| Component: |
CKEditor |
| Component: |
Web - Templates & Resources |
| Priority: |
Major Blocker |
| Labels: |
regression |
|
