Merge pull request #12521 from dacook/buu/fix-blank-selects-12473

[BUU] Fix for blank dropdowns
This commit is contained in:
Filipe
2024-06-03 17:04:40 +02:00
committed by GitHub
2 changed files with 64 additions and 5 deletions

View File

@@ -63,7 +63,7 @@ export default class BulkFormController extends Controller {
// For each record, check if any fields are changed
// TODO: optimise basd on current state. if field is changed, but form already changed, no need to update (and vice versa)
const changedRecordCount = Object.values(this.recordElements).filter((elements) =>
elements.some(this.#isChanged),
elements.some(this.#checkIsChanged.bind(this)),
).length;
this.formChanged = changedRecordCount > 0 || this.errorValue;
@@ -131,11 +131,17 @@ export default class BulkFormController extends Controller {
});
}
#isChanged(element) {
if(!element.isConnected) {
return false;
// Check if changed, and mark with class if it is.
#checkIsChanged(element) {
if(!element.isConnected) return false;
} else if (element.type == "checkbox") {
const changed = this.#isChanged(element);
element.classList.toggle("changed", changed);
return changed;
}
#isChanged(element) {
if (element.type == "checkbox") {
return element.defaultChecked !== undefined && element.checked != element.defaultChecked;
} else if (element.type == "select-one") {

View File

@@ -99,6 +99,59 @@ describe("BulkFormController", () => {
expect(input1b.classList).not.toContain('changed');
expect(input2.classList).toContain('changed');
});
describe("select not include_blank", () => {
beforeEach(() => {
document.body.innerHTML = `
<form data-controller="bulk-form" data-bulk-form-disable-selector-value="#disable1,#disable2">
<div data-record-id="1">
<select id="select1">
<option value="1">one</option>
<option value="2">two</option>
</select>
</div>
<input type="submit">
</form>
`;
});
it("shows as changed", () => {
// Expect select to show changed (select-one always has something selected)
expect(select1.classList).toContain('changed');
// Change selection
select1.options[0].selected = false;
select1.options[1].selected = true;
select1.dispatchEvent(new Event("input"));
expect(select1.classList).toContain('changed');
});
});
describe("select-one with include_blank", () => {
beforeEach(() => {
document.body.innerHTML = `
<form data-controller="bulk-form" data-bulk-form-disable-selector-value="#disable1,#disable2">
<div data-record-id="1">
<select id="select1">
<option value="">blank</option>
<option value="1">one</option>
</select>
</div>
<input type="submit">
</form>
`;
});
it("does not show as changed", () => {
expect(select1.classList).not.toContain('changed');
// Change selection
select1.options[0].selected = false;
select1.options[1].selected = true;
select1.dispatchEvent(new Event("input"));
expect(select1.classList).toContain('changed');
});
});
})
describe("activating sections, and showing a summary", () => {