Permalink
Browse files

Dynamically added form elements should be focusable as well. Fixes #15

Do not add class names for element in _findFocusableElements. Fixes #46
  • Loading branch information...
1 parent ca8df55 commit 2356c6a69d15a23db55bb6b98633fa5c27704741 @okonet committed Feb 26, 2012
Showing with 16 additions and 17 deletions.
  1. +3 −6 modalbox.js
  2. +12 −10 tests/functional/_ajax_form.html
  3. +1 −1 tests/functional/func-modalbox-test.html
View
@@ -442,19 +442,16 @@ Modalbox.Methods = {
},
_findFocusableElements: function() { // Collect form elements and links from MB content
- if (this.options.autoFocusing === true) {
- // TODO maybe add :enabled to select and textarea elements
- this.MBcontent.select('input:not([type=hidden]):enabled, select, textarea, button, a[href]').invoke('addClassName', 'MB_focusable');
- this.focusableElements = this.MBcontent.select('.MB_focusable');
- }
+ // TODO maybe add :enabled to select and textarea elements
+ this.focusableElements = this.MBcontent.select('input:not([type=hidden]):enabled, select, textarea, button, a[href]');
},
_kbdHandler: function(event) {
var node = event.element();
switch(event.keyCode) {
case Event.KEY_TAB:
event.stop();
-
+ this._findFocusableElements();
// Switching currFocused to the element which was focused by mouse instead of TAB-key. Fix for #134
if (node != this.focusableElements[this.currFocused])
this.currFocused = this.focusableElements.indexOf(node);
@@ -1,29 +1,31 @@
<form action="#" method="get" name="form" id="form" accept-charset="utf-8" onsubmit="Modalbox.show('_ajax_form.html', {title: 'Step 2', width: 500}); return false;">
<fieldset>
<input type="hidden" name="hidden" value="111" id="hidden" /> <br />
-
+
<input type="text" name="text" value="Text field" id="text" /> <br />
-
+
<p id="errmsg" style="display: none">Email is not valid! Please check it or type another email.</p>
-
+
<input type="password" name="pass" value="Pass field" id="pass" /> <br />
-
+
<input type="button" name="button" value="Toggle error message" id="button" onclick="if($('errmsg').visible()) { $('errmsg').hide(); Modalbox.resizeToContent(); } else {new Effect.Appear('errmsg', {beforeStart: function() { Modalbox.resizeToInclude('errmsg'); } });}" /> <br />
-
+
+ <input type="button" name="button" value="Insert form element" id="button" onclick="$(this).insert({after: '<br><input type=text>'}); Modalbox.resizeToContent();" /> <br />
+
<select name="select" id="select" size="1">
<optgroup label="Label Text">
<option value="Value" selected="selected" label="Label Text"> 111 </option>
<option value="Value" label="Label Text"> 222 </option>
<option value="Value" label="Label Text"> 333 </option>
</optgroup>
</select>
-
+
<br />
-
+
<textarea name="text" rows="8" cols="40"></textarea>
-
+
</fieldset>
<p><input type="submit" value="Continue &rarr;" /> or <a href="#" onclick="Modalbox.hide(); return false;">Cancel</a></p>
-
-</form>
+
+</form>
@@ -39,7 +39,7 @@
<ul>
<li><a href="_ajax_content.html" title="Modalbox with default options test" onclick="Modalbox.show(this.href); return false;">Modalbox with default options test</a></li>
<li><a href="_ajax_js.html?v=3" title="Modalbox JS passing test" onclick="Modalbox.show(this.href, {title: this.title, width: 300, afterLoad: function(){ alert('Callback test: ' + $('modalLink').inspect()) } }); return false;">Modalbox JS passing test</a></li>
- <li><a href="_ajax_form.html?v=11" title="Modalbox Prevent Scroll Test" onclick="Modalbox.show(this.href, {title: this.title}); return false;">Modalbox 'TAB'-key Handler &amp; Prevent Scroll Test</a></li>
+ <li><a href="_ajax_form.html?v=12" title="Modalbox Prevent Scroll Test" onclick="Modalbox.show(this.href, {title: this.title}); return false;">Modalbox 'TAB'-key Handler &amp; Prevent Scroll Test</a></li>
<script type="text/javascript" charset="utf-8">
var node = new Element('div', {className: 'warning', style: 'border: 1px solid #0F0; display:none'}).update(

0 comments on commit 2356c6a

Please sign in to comment.