Skip to content
Permalink
Browse files

fix(ie11): fix checkboxes in IE11

  • Loading branch information...
anehx committed Jul 2, 2019
1 parent 816932e commit 6131128210dab06c9017766134f575f73dc139df
@@ -2,6 +2,28 @@ import Component from "@ember/component";
import layout from "../../../templates/components/cf-field/input/checkbox";
import { computed } from "@ember/object";

/**
* Function to extract the option slug out of an input element. This is needed
* since IE11 does not properly set the `value` attribute but sets the value to
* `on` if checked and `off` if not. So for all sane browsers we use the
* `value` attribute but for IE11 we use the appended option slug to the field
* id as the input elements `name` property.
*
* E.g: An element with
* `name="Document:xxx-xxx:Question:some-question:Option:some-option"` will
* return `some-option`.
*
* For further information about this bug see
* https://github.com/emberjs/ember.js/issues/15203
*
* @function getSlug
* @param {Element} element The html input element
* @return {String} The option slug
*/
const getSlug = ({ value, name }) => {
return ["on", "off"].includes(value) ? name.split(":").pop() : value;
};

/**
* Input component for the checkbox question type
*
@@ -33,7 +55,7 @@ export default Component.extend({
...this.element.querySelectorAll("input[type=checkbox]:checked")
];

this.onSave([...new Set(checkedBoxes.map(el => el.value))]);
this.onSave([...new Set(checkedBoxes.map(getSlug))]);
}
}
});
@@ -5,7 +5,7 @@
<input
class="uk-checkbox uk-margin-small-right"
type="checkbox"
name={{field.pk}}
name="{{field.pk}}:Option:{{option.slug}}"
value={{option.slug}}
checked={{contains option.slug field.answer.value}}
disabled={{disabled}}
@@ -75,8 +75,10 @@ module("Integration | Component | cf-content", function(hooks) {
if (question.type === "CHOICE") {
assert.dom(`[name="${id}"][value="${answer.value}"]`).isChecked();
} else if (question.type === "MULTIPLE_CHOICE") {
// checkbox options have their option slug postfixed to the name in
// order to support IE11
answer.value.forEach(v => {
assert.dom(`[name="${id}"][value="${v}"]`).isChecked();
assert.dom(`[name="${id}:Option:${v}"][value="${v}"]`).isChecked();
});
} else {
assert.dom(`[name="${id}"]`).hasValue(String(answer.value));
@@ -93,10 +95,16 @@ module("Integration | Component | cf-content", function(hooks) {
questionIds.includes(question.id)
);

if (["CHOICE", "MULTIPLE_CHOICE"].includes(question.type)) {
if (question.type === "CHOICE") {
options.forEach(({ slug }) => {
assert.dom(`[name="${id}"][value="${slug}"]`).isDisabled();
});
} else if (question.type === "MULTIPLE_CHOICE") {
options.forEach(({ slug }) => {
assert
.dom(`[name="${id}:Option:${slug}"][value="${slug}"]`)
.isDisabled();
});
} else {
assert.dom(`[name="${id}"]`).isDisabled();
}
@@ -191,10 +199,10 @@ module("Integration | Component | cf-content", function(hooks) {
`[name="Document:${document.id}:Question:radio-question"][value="radio-question-option-2"]`
);
await click(
`[name="Document:${document.id}:Question:checkbox-question"][value="checkbox-question-option-1"]`
`[name="Document:${document.id}:Question:checkbox-question:Option:checkbox-question-option-1"][value="checkbox-question-option-1"]`
);
await click(
`[name="Document:${document.id}:Question:checkbox-question"][value="checkbox-question-option-2"]`
`[name="Document:${document.id}:Question:checkbox-question:Option:checkbox-question-option-2"][value="checkbox-question-option-2"]`
);
// The following answers are commented-out as we currently have a
// problem with GraphQL/Mirage and I didn't want to skip everything.

0 comments on commit 6131128

Please sign in to comment.
You can’t perform that action at this time.