Boolean attributes bug

[dwiyatci]

I stumbled upon this issue yesterday when trying to render checked attribute of input element:

function renderCheckbox() {
  const flag = false;

  return (
    <input type="checkbox" checked={flag} />
  );
}

I would expect this to be rendered in the DOM:

<input type="checkbox" />

but instead, what I found is:

<input type="checkbox" checked="false" />

which, of course, always made the checkbox checked. :astonished:

A bug?

[jridgewell]

That's actually a iDOM bug. :frowning:

[dwiyatci]

Ouch, okay then. :sweat_smile:

Currently I have a workaround like so (maybe it could be useful for others, too - at least for the moment):

function renderCheckbox(checked) {

  /**
   * HACK: A workaround for a iDOM bug.
   * @see https://github.com/jridgewell/babel-plugin-incremental-dom/issues/38
   * @see https://github.com/google/incremental-dom/issues/198
   */
  const booleanAttrs = {};
  if (checked) {
    booleanAttrs.checked = '';
  }

  return (
    <input type="checkbox" {...booleanAttrs} />
  );
}

Quite nasty, but it appears to be working. :-)

[jridgewell]

You should be able to use:

<input type="checkbox" checked={checked ? true : undefined} />

Or for golfing:

<input type="checkbox" checked={checked || undefined} />

[dwiyatci]

Wow, that's indeed much clearer solution. Thanks for the hint, mate! :+1: