Does not work with React's Virtual-DOM

[jlurena]

As the title suggests, I've been scratching my head effortlessly to make what-input work with React containers and/or virtual DOM, but seems not to work.

What I've noticed:

1. what-input updates the what-input
2. Works with non-react containers as intended.
3. Does not work with react components/containers

[ten1seven]

Hi @jlurena, do you have any more details about what you're seeing (or not seeing)?

What Input listens for events bubbling up to the body rather than trying to bind to individual elements. That way it doesn't have to worry about elements being added or removed from the dom. If you're cancelling bubbling on events that could be one issue.

Another thing to keep in mind is that the script behaves slightly differently on forms, however you should still see a change on the data-whatintent attribute.

We do use What Input on React projects the devs who use it (I'm not a React dev myself) say that "it's in the prelude before apps boot". Not sure if that helps, but if you can provide additional details we might be able to get it figured out.

[jlurena]

Hi @ten1seven , Thanks for the quick reply.

I wish I could be more descriptive, but I'm not quite sure what is going on. But I know that I am not cancelling any events from bubbling on the component that I'm trying to style using the what-input selectors, I am however, in other components within that page. Would this cause an issue?

Also, here is a code snippet that does not work with the reactified page.

    a {
        color: purple;
        &:hover,
        [data-whatinput='mouse'] &:focus,
        {
          @include transition(all 300ms ease-in-out);
          opacity: .5;
        }
        [data-whatinput='keyboard'] &:focus,
        [data-whatintent='keyboard'] &:focus {
          @include transition(all 300ms ease-in-out);
          color: white;
          background-color: purple;
        }
    }

[jlurena]

@ten1seven I found the error. It had more to do with Foundation Style (that I use) having a higher specificity over the [data-whatinput=""] selector. Placed it outside the document into the body and that fixed things.

Thanks!

[ten1seven]

Awesome! Thanks for the follow-up.