Checkbox not working for some users with Internet Explorer 11

Help Requests
1

We have built our site using Aurelia and are using a template to display a checkbox, as follows:

<template>
    <checkbox label="I understand and accept the &nbsp;<a href='${termsOfServiceDocLink}' target='_blank'>Terms of Service</a>&nbsp;and&nbsp;<a href='${privacyDocLink}' target='_blank'>Privacy Policy</a>" value.bind="value"></checkbox>
</template>

<terms-of-service-checkbox value.bind="userRegistration.termsAccepted & validate"></terms-of-service-checkbox>

For some users with Internet Explorer 11 the resulting checkbox can’t be selected no matter how or where they click. We’ve been unable to replicate this in our development environment. The site has been running fine for several years without encountering this issue. Our platform is provided as a service for several corporate partners, and so far we’ve only seen this issue on one corporate network, and only for users with IE11 (Chrome works fine).

Could this be a problem with some Aurelia functionality being blocked somehow?

Thanks,
Rudi

1 Like
2

The template looks a bit abnormal to me, so:

  • is checkbox a custom element?
  • is the entire string here "I understand and accept the &nbsp;<a href='${termsOfServiceDocLink}' target='_blank'>Terms of Service</a>&nbsp;and&nbsp;<a href='${privacyDocLink}' target='_blank'>Privacy Policy</a>" intended to be the label of the checkbox? I’m guessing you are setting some innerHTML inside?
3

Good point. I hadn’t even registered that it was a custom element. I thought custom elements needed to have a hyphen in their name, so I’m not quite sure how this is working. Here’s the template for checkbox:

<template>
    <div class="ui ${disabled ? 'disabled' : ''} ${readOnly ? 'read-only' : ''} ${inverted ? 'inverted' : ''} form checkbox" ref="toggle">
        <label if.bind="label && label != '' && labelPosition == 'left'" innerhtml.bind="label"></label>
        <input type="checkbox" checked.bind="value" />
        <label if.bind="label && label != '' && labelPosition == 'right'" innerhtml.bind="label"></label>
        <label show.bind="!label || label == ''">
            <slot></slot>
        </label>
    </div>
</template>

And this is how the html appears in the browser (Chrome and IE the same):

<terms-of-service-checkbox value.bind="userRegistration.termsAccepted & validate" class="au-target" au-target-id="71">
   <div ref="toggle" class="au-target ui form checkbox" au-target-id="14">
     <!--anchor--> <input type="checkbox" checked.bind="value" class="au-target hidden" au-target-id="17" tabindex="0">
     <label innerhtml.bind="label" class="au-target" au-target-id="18">I understand and accept the &nbsp;<a href="https://path.to/Terms%20of%20Service.pdf" target="_blank">Terms of Service</a>&nbsp;and&nbsp;<a href="https://path.to/forgood%20Privacy%20Policy.pdf" target="_blank">Privacy Policy</a>
     </label><!--anchor--> 
     <label show.bind="!label || label == ''" class="au-target aurelia-hide" au-target-id="20">
         <!--slot--> 
     </label>
    </div>
   <!--anchor--> 
</terms-of-service-checkbox>
4

I am not sure if this is a possibility, but could there be some element covering the checkbox and preventing it from getting any events?

I am thinking css gone awry in the older browser?
Can you get them to try using inspect on the checkbox and see if it selects it in the html?