Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix input placeholder bug & improve handling #458

Merged
merged 1 commit into from
Sep 13, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 28 additions & 6 deletions replace2.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { questionQueue, nextClick, previousClicked, moduleParams, rbAndCbClick, textBoxInput, handleXOR, displayQuestion, parseSSN, parsePhoneNumber, submitQuestionnaire, textboxinput, math, radioAndCheckboxUpdate } from "./questionnaire.js";
import { questionQueue, nextClick, previousClicked, moduleParams, rbAndCbClick, textBoxInput, handleXOR, displayQuestion, parseSSN, parsePhoneNumber, submitQuestionnaire, textboxinput, math, radioAndCheckboxUpdate, evaluateCondition } from "./questionnaire.js";
import { restoreResults } from "./localforageDAO.js";
import { parseGrid, grid_replace_regex } from "./buildGrid.js";
import { clearValidationError } from "./validate.js";
Expand Down Expand Up @@ -531,14 +531,36 @@ transform.render = async (obj, divId, previousResults = {}) => {

// Handle not converted and not yet calculated min and max values
const minMaxValueTest = (value) => { return value && !value.startsWith('valueOr') && !value.includes('isDefined') && value !== '0' ? value : ''; }
const min = minMaxValueTest(optionObj.min);
const max = minMaxValueTest(optionObj.max);
// Evaluate min and max, ensuring they are valid numbers or get evaluated if they aren't.
const evaluateMinMax = (value) => {
let result = minMaxValueTest(value);
if (result && isNaN(result)) {
result = evaluateCondition(result);
if (isNaN(result)) result = ''; // Reset if still not a number after evaluation
}
return result;
};

// Process min and max values
let min = evaluateMinMax(optionObj.min);
let max = evaluateMinMax(optionObj.max);

// Build the description text
const descriptionText = `This field accepts numbers. Please enter a whole number ${min && max ? 'between ' + min + ' and ' + max : ''}.`;
const descriptionText = `This field accepts numbers. Please enter a whole number ${min && max ? `between ${min} and ${max}` : ''}.`;
const defaultPlaceholder = `placeholder="${moduleParams.i18n.enterValue}"`;

// Use default placeholder when min to max range is a large distribution, e.g. max weight (999) and max age (125).
// Same for min == 0. Show default placeholder for those cases.
let placeholder;
if (max && max > 100) {
placeholder = defaultPlaceholder;
} else if (min && max) {
const avgValue = Math.floor((parseInt(min, 10) + parseInt(max, 10)) / 2);
placeholder = `placeholder="${moduleParams.i18n.example}: ${avgValue}"`;
} else {
placeholder = defaultPlaceholder;
}

// Add placeholder and aria-describedby
const placeholder = min ? `placeholder="${moduleParams.i18n.example}: ${min}"` : (max ? `placeholder="${moduleParams.i18n.example}: ${max}"` : `placeholder=${moduleParams.i18n.enterValue}`);
options += ` ${placeholder} aria-describedby="${elementId}-desc"`;

//onkeypress forces whole numbers
Expand Down