Skip to content

Click event on label child does not toggle label checkbox checked value #2367

@eddyerburgh

Description

@eddyerburgh

Basic info:

  • Node.js version: 8.12.0
  • jsdom version: 12.0.0

I've read through the WhatWG spec, and I think this is true:

Dispatching a MoustEvent of type click on a child element of a label should cause the first labeled control to toggle checkedness. (If clicking a label normally causes this behavior)

This is implemented inconsistently between browsers. Chrome 69, Safari 11.1.2, IE 11 toggle the inputs checked value, Firerfox 62 does not.

From reading the specs, this is what I understand:

  • click() dispatches a MouseEvent with type click on the target element (div)
  • div does not have activation behavior, so activationTarget is null
  • parent node (label) has activation behavior, activationTarget is set to parent (label)
  • Run activation behavior of activationTarget

Minimal reproduction case

const { JSDOM } = require('jsdom');

var dom = new JSDOM('\
  <!DOCTYPE html>\
  <html>\
    <body>\
      <label><div /><input type="checkbox"></label>\
    </body>\
  </html>\
');

var div = dom.window.document.querySelector('div');
var input = dom.window.document.querySelector('input');
var label = dom.window.document.querySelector('label')

label.click()

console.log('expecting true, actual', input.checked); // actual = true

div.click();

console.log('expecting false, actual', input.checked); // actual = true

How does similar code behave in browsers?

Input checkedness is toggled in most browsers (https://jsfiddle.net/4x0tjLms/5/).

Input checkedness is not toggled in Firerfox 62, but Firefox does not toggle checkedness when click is called on a label with labeled control. JSDOM does toggle checkedness when click is called on label with a labeled control.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions