VisualEditor: Hyperlink tool obscures reference box when many options (CSS caching issue?)
Open, NormalPublic

Description

An editor had an issue on English Wikipedia with the hyperlink tool when used within the reference editor.

Specifically, he formatted a reference manually and then used the hyperlink tool within the reference editor to provide an external link to the work. He found that many options were offered, to the point that the reference box was obscured by the list of possible links and he had to just guess where to paste the actual url.

I reproduced this and took a screenshot.

http://en.wikipedia.org/wiki/File:VisualEditor_Reference_issue.jpg


Version: unspecified
Severity: normal

Details

Reference
bz50943
bzimport raised the priority of this task from to Normal.
bzimport set Reference to bz50943.

I should add his words (User:Bilby):

"Short version - the pop-list of suggested wikilinks was malformed if it was long enough to cover the group name box, and prevents the user from seeing the text box when pasting a URL. When a URL is blindly pasted, it is easy to accidentally click on the wikilink option, but there is no indicator that this has occurred once the pop-up list disappears."

See http://en.wikipedia.org/w/index.php?title=Wikipedia:VisualEditor/Feedback&oldid=563382661#Adding_references_with_links

Maggie, I am not able to reproduce this behavior in Chrome or Firefox; the references dialog expands with a scrollbar if needed. Are you still getting this? If so could you provide more detailed steps to reproduce and browser info? Thanks!

adam.jenkins wrote:

Hi! I'm currently running Chrome 26 on a MacBook Pro retina running 10.8.4, but I think I also had it on an iMac, but I'll confirm. When adding a new reference:

  • I typed in "this is a lunk" (I mistyped link)
  • Selected "lunk" and click on the link icon

This produces the pop-up list of suggested links, but it sits over the top of the text box, preventing the user from seeing what is typed. A url can still be pasted in. If the user types a URL, the pop-up list will disappear, but reappear after any pause in typing, hiding the box again. (This reappearance would be desired behaviour normally).

As a secondary problem, (which is why I used "lunk" as an example above), if the pop-up list is long enough to extend over the "Use this group" textbox, the textbox appears as an item in the pop-up list. You can see it a bit in the attachment Maggie provided. If the pop-up list is longer, it is inserted between elements.

If a URL is entered the list reduces in size to two elements, the link in blue as an "External link", and the link in red as a "New page". However, the window still slightly overlaps the text box for entering the URL, and if accidently clicked when trying to select the textbox again, the link is changed to a wikilink and the options disappear. But there is no indication that this has occurred. This seems in part to be the "new pages appear as blue links" bug, so it might be fixed as part of that.

This does not occur in Chrome under Windows 7, as pop-up list appears below the text box, and doesn't have the issue with the "Use this group" textbox.

adam.jenkins wrote:

I've been able to recreate the behaviour using Chrome on the iMac.

Created attachment 12795
Expected behaviour if adding a link in a DOM dialog like a reference

Attached:

(In reply to comment #3)

When adding a new reference:

  • I typed in "this is a lunk" (I mistyped link)
  • Selected "lunk" and click on the link icon

    This produces the pop-up list of suggested links, but it sits over the top of the text box, preventing the user from seeing what is typed.

OK, that's definitely broken behaviour - see the attachment I added just now for expected behaviour. Can you give a screenshot of what it looks like for you (is Maggie's link - http://en.wikipedia.org/wiki/File:VisualEditor_Reference_issue.jpg - accurate)? Does is still occur? In what skin? Do you have some gadgets installed, and does it occur if you disable them?

As a secondary problem, (which is why I used "lunk" as an example above), if
the pop-up list is long enough to extend over the "Use this group" textbox,
the textbox appears as an item in the pop-up list. You can see it a bit in
the attachment Maggie provided. If the pop-up list is longer, it is inserted
between elements.

That won't happen if the link inspector's suggestion box appears in the correct mode.

This does not occur in Chrome under Windows 7, as pop-up list appears below
the text box, and doesn't have the issue with the "Use this group" textbox.

This looks horribly like a caching bug - what happens if you hard-refresh (in Chrome on Mac, Command-Shift-R on any page whilst in VisualEditor mode)?

adam.jenkins wrote:

Screenshot, Chrome, Mac running OSX 10.8.4

Pop-up list sits above textbox, text box for group appears in pop-up list.

Attached:

adam.jenkins wrote:

Refreshing cache didn't help - I refreshed with VE open and again with the link dialog open. I noticed it didn't occur when adding a normal link in the body, only when adding a link in a reference.