Date fields set up in CCK with the javascript popup editing enabled, the default browser field drop-down with previous values collides with the javascript time editing behaviors (FireFox 2.0)
This can be very confusing to the user when setting time with the up/dn arrow keys - the browser interprets this as selecting an item in its dropdown, then when you hit left/right it steps on your values with the line selected in the dropdown (See attached screenshot)
The same kind of thing happens on the date field too - if you click on the field a second time, the calendar goes away and the browser dropdown appears. Less destructive, but still not ideal.

Is there a way to cleanly disable the browser dropdown when the javascript tool is active? Our users love the arrow-key editing with 30min increments, except for this...

Thanks for a great module - with Calendar, CCK and views, it's let us create a very simple and powerful little team coordination / project tracking system.

CommentFileSizeAuthor
DateDropdown.gif7.44 KBpetertj
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

KarenS’s picture

I don't know any way to turn that browser behavior off. If someone does, maybe that can post here.

petertj’s picture

Maybe there's an input handler that can capture the arrow keys...

I found this: http://www.java2s.com/Code/JavaScript/Event/Handlearrowkeycontrolalt.htm

I'm not enough of a programmer to evaluate this approach, though.

petertj’s picture

found a more applicable piece of keypress trapping sample code at http://www.java2s.com/Code/JavaScript/Event/KeyboardEventHandlerLaborato...

Below is a test page I stripped down to the bare minimum. An event handler activated by an onfocus() on the input element. A test against the keycodes intercepts and displays the arrow keys, but passes everything else through to the form element.

I tried hacking this into a copy of my Drupal page with date forms, but jQuery already has a keypress event handler that makes mine fail. Someone who understands jQuery should be better able to determine if this approach has any promise.

Like I said, I'm not really a programmer as such, but hopefully I can help narrow things down a bit. Anyway, here's my test page:

<HTML>
<HEAD>
<TITLE>Keyboard Event Handler Lab</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function initArrowFilter() {
    document.onkeypress = showKeyPress
}
function clearArrowFilter() {
    document.onkeypress = ''
}
function showKeyPress(evt) {
    evt = (evt) ? evt : window.event
		if (evt.keyCode==37 || evt.keyCode==38 || evt.keyCode==39 || evt.keyCode==40) {
	    document.getElementById("pressKeyCode").innerHTML = evt.keyCode
    	return false
		}
}
</SCRIPT>
</HEAD>
<BODY >
<FORM>
  <textarea rows="3" onFocus="initArrowFilter()" onBlur="clearArrowFilter()"></textarea>
  <p>Arrow key code: <span ID="pressKeyCode">0</span></p>
</FORM>
</BODY>
</HTML>

KarenS’s picture

This kind of coding is beyond my skills, so I won't be able to do it. I'll leave this post in case someone else has ideas.

KarenS’s picture

We ran into a problem getting the popup working right with the AHAH add more button and the fix for that broke the timepicker (see http://drupal.org/node/286398). So for the moment the timepicker is just a manual element.

If you have any jquery skills, take a look at that issue and see if you have any ideas to get that working again.

KarenS’s picture

Status: Active » Fixed

I found a fix, but it's kind of an odd one. If I put display:none on the timeentry image css (we aren't even using the image anyway), FF quits offering that dropdown. Bizarre, but it works.

Anonymous’s picture

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.