New Relationship - Find Target Contact: UI issue with Zen theme

[davej]

When creating a relationship on a Drupal/Civi site using the Zen theme, the Find Target Contact AJAX drop-down does not work well or consistently. Results of a few trials:

Trial 1: typed first 4 letters, got list of 10 matching contacts + More Choices in drop-down. Desired contact not in drop down so clicked More Choices. This didn't work, it collapsed the drop-down and selected one of the unwanted contacts (the first on what would have been the second set of ten choices, had this set been displayed) leaving it highlighted. The drop-down button then became inoperative, there was no way to get back to the list of matching contacts. Clearing the text did not solve this: typing the first four letters again produced no matches in the drop-down.

Once the widget gets into this inoperative state, I have found no way to get it to drop down again. However, typing some letters then using the keyboard's up & down arrow keys allows one to step through matching contacts and select one. Also once in this state, activating the Cancel button can take several clicks, sometimes requiring a few repetitions of clicking on the page outside the drop down then on the Cancel button.

Trial 2: typed first 5 letters, got one match, all OK.

Trial 3: typed first 3 letters, results as trial 1.

This problem seems to be theme-specific: all works fine in Garland. I have replicated the problem on three different sites using Zen, with Civi versions 2.1.2 and 2.1.0 .

I can imagine this being a pain to track down!

Dave

[Dave Greenberg]

Dave - Does it matter which browser you use (we've had some issues w/ dojo widgets that are browser-specific - usually IE :-) )?

One way to make progress debugging this is if you can browse the problem page with FireFox WITH Firebug loaded and enabled (this is a FireFox extension which has good debugging tools for Jscript, HTML and CSS problems). You can then see if Firebug reports Jscript errors when the problem(s) are occurring.

[davej]

Thanks for the reply, Dave. Sorry I forgot to mention which browser I was using, it was Firefox 3.0.4 on Linux. I tried Firebug, also the built-in Error Console but no Javascript errors were reported.

Just tried with Opera 9.62 on Linux, the New Relationship - Find Target Contact dojo widget doesn't appear at all there, just a plain text field. Javascript is enabled and I get the AJAX widget for Contact Search. With Opera, this is not theme-specific: the dojo widget fails to appear in Garland, too and I can replicate this issue on drupal.demo.civicrm.org .

In IE7 with Zen, the behaviour is worse than Firefox 3. The drop-down button fails to display properly on the widget, just an empty rectangle. After selecting Relationship Type, it's almost impossible to get keyboard focus on the Find Target Contact widget with the mouse. Mostly I get a text cursor over the drop-down button, but with safe-cracker dexterity over the vertical centre of the button, it's possible to get a hand cursor and then by clicking, get focus on the widget and sometimes get the drop-down to drop down. It's possible to get focus by tabbing. Having got focus, the behaviour is similar to Firefox 3 except that even in the case that works with Firefox (type enough letters to get a unique match), the widget more often than not seems to lose the selected contact when you hit Search: the search appears to be unconstrained and so finds too many matching contacts.

In IE7 with Garland, the drop-down button also doesn't display properly but the widget does operate OK.

Focus seems to be a key issue here.

Dave J

[Dave Greenberg]

Dave - Thx for the details. We've done some work on that widget for 2.2. so would be helpful if you could try your tests with IE7 and Opera on the 2.2 sandbox:

http://sandbox.civicrm.org

[davej]

Thanks Dave, only problem there is that the main issues don't show up with the Garland theme used on the demo sites but do with Zen. One possibility would be to install the Zen theme on the sandbox and make it available to users as a theme choice, but that means volunteering someone to do an extra job!

I've just checked the sandbox on IE7 and the issue that happens with Garland in 2.1 is still there, namely the drop-down button displaying as a blank rectangle.

In Opera on Linux, 2.2 sandbox also behaves as 2.1: the Find Target Contact field is just a plain textfield.

Dave J

[Dave Greenberg]

I've asked our team to investigate - at least the IE7 behavior on sandbox (hopefully it's the same thing that triggers these variations on the 'misbehavior').

[Kurund Jalmi]

davej:

Fixed and also updated CiviCase sandbox. Let me know if there are any issues..

Kurund

[davej]

Thanks for the update, Kurund, however I haven't been able to test on sandbox because AFAICS the Zen theme isn't available there, at least for the demo user.

Dave J

[Kurund Jalmi]

Dave J,

I don't think issue was specific to Zen theme. I was able to replicate in Garland theme. (Note the demo is on v2.1, it worked fine in v2.1)

Kurund

[davej]

Hi Kurund,

Have you tested with the Zen theme? In 2.1, the problems are much worse with Zen than with Garland, as described in my previous posts on this thread. If you have tested in Zen and verified that the problems are fixed, then that's brilliant; if you'd like me to test (which I'm happy to do), would it be possible to make the Zen theme available to the demo user on sandbox, or else set up another user who is permitted to change theme?

Thanks,

Dave J

[Kurund Jalmi]

Tested with Zen theme, seems to be working fine.
http://case.dev.civicrm.org/civicrm/contact/view/rel?cid=102&action=add&reset=1

Kurund

[davej]

Thanks, Kurund. I did some testing on case.dev.civicrm.org; limited because there's only one org + one individual in the db and some of the issues depend on the number of contacts matching the characters typed into the widget. I'm happy to enter some more contacts & re-test if that won't disrupt the dev work.

Firefox 3.0.5 on Linux:
Works initially. There's an issue if you type a character into the widget and then realise you've made a mistake and hit backspace: the widget then goes into the inoperative state that I described earlier.

IE7 on Windows XP:
Now as Firefox 3.0.5, which is a big improvement!

Opera 9.63 on Linux:
Widget does not display.

Dave J

[Kurund Jalmi]

Opera 9.63 on Linux:
Widget does not display.

This is bug with dijit widget i have fixed it..

Firefox 3.0.5 on Linux:
Works initially. There's an issue if you type a character into the widget and then realise you've made a mistake and hit backspace: the widget then goes into the inoperative state that I described earlier.

IE7 on Windows XP:
Now as Firefox 3.0.5, which is a big improvement!

This is definitely theme specific issue. Our focus is on the default theme and to ensure things work on it feel free to submit a patch that fixes issues on Zen theme, we don't have the energy to support/debug multiple themes

thanx

Kurund