1
0
mirror of https://github.com/psychopy/psychojs.git synced 2025-05-10 10:40:54 +00:00

Fix DlgFromDict form labels not focussing/selecting corresponding input element

Use
htmlCode += '<label for="' + keyId + '">' + key + '</label>';
This commit is contained in:
Sijia Zhao 2020-05-19 18:42:59 +01:00
parent d4b52796c9
commit 4b064bccc0

View File

@ -19,7 +19,7 @@ import * as util from '../util/Util';
/** /**
* @class * @class
* Graphic User Interface * Graphic User Interface
* *
* @name module:core.GUI * @name module:core.GUI
* @class * @class
* @param {module:core.PsychoJS} psychoJS the PsychoJS instance * @param {module:core.PsychoJS} psychoJS the PsychoJS instance
@ -46,7 +46,7 @@ export class GUI
* <p>Create a dialog box that (a) enables the participant to set some * <p>Create a dialog box that (a) enables the participant to set some
* experimental values (e.g. the session name), (b) shows progress of resource * experimental values (e.g. the session name), (b) shows progress of resource
* download, and (c) enables the participant to cancel the experiment.</p> * download, and (c) enables the participant to cancel the experiment.</p>
* *
* <b>Setting experiment values</b> * <b>Setting experiment values</b>
* <p>DlgFromDict displays an input field for all values in the dictionary. * <p>DlgFromDict displays an input field for all values in the dictionary.
* It is possible to specify default values e.g.:</p> * It is possible to specify default values e.g.:</p>
@ -55,7 +55,7 @@ export class GUI
* psychoJS.schedule(psychoJS.gui.DlgFromDict({dictionary: expInfo, title: expName}));</code> * psychoJS.schedule(psychoJS.gui.DlgFromDict({dictionary: expInfo, title: expName}));</code>
* <p>If the participant cancels (by pressing Cancel or by closing the dialog box), then * <p>If the participant cancels (by pressing Cancel or by closing the dialog box), then
* the dictionary remains unchanged.</p> * the dictionary remains unchanged.</p>
* *
* @name module:core.GUI#DlgFromDict * @name module:core.GUI#DlgFromDict
* @function * @function
* @public * @public
@ -146,7 +146,7 @@ export class GUI
if (!inUrl) if (!inUrl)
{ {
htmlCode += '<label for="' + key + '">' + key + '</label>'; htmlCode += '<label for="' + keyId + '">' + key + '</label>';
// if the field is required: // if the field is required:
if (key.slice(-1) === '*') if (key.slice(-1) === '*')
@ -293,9 +293,9 @@ export class GUI
*/ */
/** /**
* Show a message to the participant in a dialog box. * Show a message to the participant in a dialog box.
* *
* <p>This function can be used to display both warning and error messages.</p> * <p>This function can be used to display both warning and error messages.</p>
* *
* @name module:core.GUI#dialog * @name module:core.GUI#dialog
* @function * @function
* @public * @public
@ -348,7 +348,7 @@ export class GUI
{ {
stackCode += '<li><b>' + error + '</b></li>'; stackCode += '<li><b>' + error + '</b></li>';
break; break;
} }
} }
stackCode += '</ul>'; stackCode += '</ul>';
@ -391,7 +391,7 @@ export class GUI
// replace root by the html code: // replace root by the html code:
const dialogElement = document.getElementById('root'); const dialogElement = document.getElementById('root');
dialogElement.innerHTML = htmlCode; dialogElement.innerHTML = htmlCode;
// init and open the dialog box: // init and open the dialog box:
this._estimateDialogScalingFactor(); this._estimateDialogScalingFactor();
const dialogSize = this._getDialogSize(); const dialogSize = this._getDialogSize();
@ -506,7 +506,7 @@ export class GUI
/** /**
* Destroy the currently opened dialog box. * Destroy the currently opened dialog box.
* *
* @name module:core.GUI#dialog * @name module:core.GUI#dialog
* @function * @function
* @public * @public