search

ericjgagnon / wickedpicker

A simple jQuery timepicker
http://ericjgagnon.github.io/wickedpicker/
MIT License
93 stars 78 forks source link

Erratic tabbing between timepickers #29

Open howardb3115 opened 8 years ago

howardb3115 commented 8 years ago

I have three time fields in my form, which I want the user to be easily able to tab and back-tab between the three fields. However I found that with just three timepickers in my form that the focus jumped from the first to the second and back to the first, for several cycles, then it jumps to third, and then goes back to jumping between the first two for a while, before going back to the third field. Any ideas on how to get the field navigation to work properly? Here are the definitions for the three timepickers, perhaps I just missed something:

<body>
...
<input type="text" id="timepicker-1" class="timepicker" tabindex="1" />&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="timepicker-2" class="timepicker" tabindex="2" />&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="timepicker-3" class="timepicker" tabindex="3" />
...
<script>
$( '#timepicker-1' ).wickedpicker( { now : "13:00", title : 'Timepicker-1', show : showPicker } );
$( '#timepicker-2' ).wickedpicker( { now : "14:00", title : 'Timepicker-2', show : showPicker } );
$( '#timepicker-3' ).wickedpicker( { now : "15:00", title : 'Timepicker-3', show : showPicker } );
function showPicker( element ) {
$( '.wickedpicker__title' ).contents().first().replaceWith( ( ( this.options !== undefined )
? this.options.title
: this.title ) );
}
</script>
...
</body>

Any ideas on how to get the field navigation to work properly? Thanks

ericjgagnon commented 8 years ago

I wasn't really able to recreate the issue with tabbing between three pickers, but I know that the plugin does add tab indexes to each of the time spans (ie wickedpickercontrolscontrol--hours, ..minutes, seconds, etc..) so that when you focus on an input that has a wickedpicker the focus is shifted to the hours element. I may need to rethink the keyboard accessibility part.

howardb3115 commented 8 years ago
Thank you for your attention on this issue,I used the standard external javascripts and css file, shown in the attached file and without the timepickers actually opening, if I press the tab key the focus jumps between the three instances on the page, but not in the expected order.  Instead the focus goes as follows:From Totimepicker input box 1 timepicker input box 2timepicker input box 2 timepicker input box 1back and forth between timepicker input box 1 and timepicker input box 2 a few times, and then finallytimepicker input box 2 timepicker input box 3timepicker input box 3 timepicker input box 1,timepicker input box 1 timepicker input box 2back and forth between timepicker input box 1 and timepicker input box 2 a few times, and then eventuallytimepicker input box 2 timepicker input box 3This pattern repeats itself randomly for as long as you press the tab key.I tried to put the code that I've attached into jsFiddle and CodePens, but couldn't really do that because the external css and js code is local on my computer.I know that none of this is new information, but perhaps seeing that the html file that I'm getting these results from isn't doing anything special or unusual will help.  I can send you a video of the focus jumping between the fields if you like, but only if you want it.Thanks again,Howard Brown-----Original Message----- From: Eric Gagnon Sent: Aug 26, 2016 4:11 PM To: ericjgagnon/wickedpicker Cc: howardb3115 , Author Subject: Re: [ericjgagnon/wickedpicker] Erratic tabbing between timepickers (#29) I wasn't really able to recreate the issue with tabbing between three pickers, but I know that the plugin does add tab indexes to each of the time spans (ie wickedpicker__controls__control--hours, ..minutes, seconds, etc..) so that when you focus on an input that has a wickedpicker the focus is shifted to the hours element. I may need to rethink the keyboard accessibility part. —You are receiving this because you authored the thread.Reply to this email directly, view it on GitHub, or mute the thread. {"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/ericjgagnon/wickedpicker","title":"ericjgagnon/wickedpicker","subtitle":"GitHub repository","main_image_url":"https://cloud.githubusercontent.com/assets/143418/17495839/a5054eac-5d88-11e6-95fc-7290892c7bb5.png","avatar_image_url":"https://cloud.githubusercontent.com/assets/143418/15842166/7c72db34-2c0b-11e6-9aed-b52498112777.png","action":{"name":"Open in GitHub","url":"https://github.com/ericjgagnon/wickedpicker"}},"updates":{"snippets":[{"icon":"PERSON","message":"@ericjgagnon in #29: I wasn't really able to recreate the issue with tabbing between three pickers, but I know that the plugin does add tab indexes to each of the time spans (ie wickedpicker__controls__control--hours, ..minutes, seconds, etc..) so that when you focus on an input that has a wickedpicker the focus is shifted to the hours element. I may need to rethink the keyboard accessibility part. "}],"action":{"name":"View Issue","url":"https://github.com/ericjgagnon/wickedpicker/issues/29#issuecomment-242873520"}}}Work Phone: 858-304-8100Home Phone: 858-487-3115Cell Phone: 858-472-3115Hungry Genius URL: www.hungrygenius.comWork Email: ronbrown@hungrygenius.co (coming soon!)Home Email: howardb1@earthlink.netWork Phone: 858-304-8100Home Phone: 858-487-3115Cell Phone: 858-472-3115Hungry Genius URL: www.hungrygenius.comWork Email: ronbrown@hungrygenius.co (coming soon!)Home Email: howardb1@earthlink.net