additional edits to uswds and to combobox.js to accomodate for empty values in options

This commit is contained in:
David Kennedy 2025-01-14 19:23:29 -05:00
parent ea509f63ef
commit 1ca52b49bb
No known key found for this signature in database
GPG key ID: 6528A5386E66B96B
2 changed files with 37 additions and 18 deletions

View file

@ -1037,7 +1037,7 @@ const noop = () => {};
* @param {string} value The new value of the element * @param {string} value The new value of the element
*/ */
const changeElementValue = function (el) { const changeElementValue = function (el) {
let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ""; let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
const elementToChange = el; const elementToChange = el;
elementToChange.value = value; elementToChange.value = value;
const event = new CustomEvent("change", { const event = new CustomEvent("change", {
@ -1167,13 +1167,21 @@ const enhanceComboBox = _comboBoxEl => {
placeholder placeholder
}); });
} }
if (defaultValue) { // DOTGOV - allowing for defaultValue to be empty
for (let i = 0, len = selectEl.options.length; i < len; i += 1) { //if (defaultValue) {
const optionEl = selectEl.options[i]; // for (let i = 0, len = selectEl.options.length; i < len; i += 1) {
if (optionEl.value === defaultValue) { // const optionEl = selectEl.options[i];
selectedOption = optionEl; // if (optionEl.value === defaultValue) {
break; // selectedOption = optionEl;
} // break;
// }
// }
//}
for (let i = 0, len = selectEl.options.length; i < len; i += 1) {
const optionEl = selectEl.options[i];
if ((optionEl.value === defaultValue) || (!optionEl.value && !defaultValue)) {
selectedOption = optionEl;
break;
} }
} }
@ -1500,16 +1508,27 @@ const resetSelection = el => {
} = getComboBoxContext(el); } = getComboBoxContext(el);
const selectValue = selectEl.value; const selectValue = selectEl.value;
const inputValue = (inputEl.value || "").toLowerCase(); const inputValue = (inputEl.value || "").toLowerCase();
if (selectValue) { // DOTGOV - allow for option value to be empty string
for (let i = 0, len = selectEl.options.length; i < len; i += 1) { //if (selectValue) {
const optionEl = selectEl.options[i]; // for (let i = 0, len = selectEl.options.length; i < len; i += 1) {
if (optionEl.value === selectValue) { // const optionEl = selectEl.options[i];
if (inputValue !== optionEl.text) { // if (optionEl.value === selectValue) {
changeElementValue(inputEl, optionEl.text); // if (inputValue !== optionEl.text) {
} // changeElementValue(inputEl, optionEl.text);
comboBoxEl.classList.add(COMBO_BOX_PRISTINE_CLASS); // }
return; // comboBoxEl.classList.add(COMBO_BOX_PRISTINE_CLASS);
// return;
// }
// }
//}
for (let i = 0, len = selectEl.options.length; i < len; i += 1) {
const optionEl = selectEl.options[i];
if ((!selectValue && !optionEl.value) || optionEl.value === selectValue) {
if (inputValue !== optionEl.text) {
changeElementValue(inputEl, optionEl.text);
} }
comboBoxEl.classList.add(COMBO_BOX_PRISTINE_CLASS);
return;
} }
} }
if (inputValue) { if (inputValue) {

View file

@ -48,7 +48,7 @@ export function loadInitialValuesForComboBoxes() {
// Change the default input behaviour - have it reset to the data default instead // Change the default input behaviour - have it reset to the data default instead
clearInputButton.addEventListener("click", (e) => { clearInputButton.addEventListener("click", (e) => {
if (overrideDefaultClearButton && initialValue) { if (overrideDefaultClearButton) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
input.click(); input.click();