ArthurClemens / polythene

Material Design component library for Mithril and React
590 stars 43 forks source link

Card onclick does not work in all content types #71

Closed cmawhorter closed 6 years ago

cmawhorter commented 6 years ago

Using mithril 1.1.6 and polythene-mithril-card 1.1.2.

Take a look at the first card here: https://jsfiddle.net/t8c22tj6/

  1. Open console
  2. Click on header, console will log header
  3. Click on media, text and nothing is logged

media has events: { onclick } and an onclick directly attached to the content: m(img). Both fail to fire.

events: { onclick } also doesn't work for other card content types such as text.

There should be a way to handle a click event for at least media.

Edit: On closer inspection, part of the reason is a dimmer is being always being shown. Even setting showDimmer: false explicitly does not prevent dimmer from being displayed.

However, even after manually removing the dimmer, events: { onclick } still fails to fire, however, m(img, { onclick }) does work.

Here's my workaround:

    return m(Card, {
      oncreate(vn) {
        const element = vn.dom.querySelector('.pe-card__media__dimmer');
        if (element) {
          element.remove();
        }
      },
      content: [
        {
          media: {
            content: m('img', {
              src: '...',
              onclick,
            }),
          },
        },
      ],
    });
ArthurClemens commented 6 years ago

Fixed in release 1.2.0.