Sibling w/ relative or absolute positioning can cause react-ink not to work

[ashtonsix]

This also applies to children of siblings, and seems to depend on the order of elements. I believe the positioning messes w/ z-levels which means click events don't always propogate to react-ink.

Examples:
#1 Does work:

button([
  Ink()])

#2 Does work:

button([
  Ink(),
  span('text')])

#3 Doesn't work:

button([
  Ink(),
  span({style: {position: 'relative'}, 'text')])

#4 Doesn't work:

button([
  Ink(),
  div([
    span({style: {position: 'relative'}, 'text')])])

#5 Doesn't work:

button([
  Ink(),
  div([
    span({style: {position: 'relative'}, 'text'),
    span('text')])])

#6 Does work:

button([
  Ink(),
  div([
    span('text'),
    span({style: {position: 'relative'}, 'text')])])

#7 Does work (best workaround)

button([
  span({style: {position: 'relative'}, 'text'),
  Ink()])

[nhunzaker]

Hmm. This is entirely because of relative/absolute positioning with z-index. The Ink component needs to catch the click/touch handlers in order to receive the signals to display the effect. If it isn't on top, that will not happen.

The easy fix would be to allow the Ink component to accept a style property (to use the second to last case as an example):

button([
  Ink({ style: { zIndex: 1 }),
  div([
    span('text'),
    span({style: {position: 'relative'}, 'text')])])

It looks like, presently, you can do this because we merge the style prop passed to Ink into the bare minimum style requirements for the component:

https://github.com/vigetlabs/react-ink/blob/master/src/index.jsx#L150

We should make it clearer in the readme about the z-indexing issues. Would you be willing to give your thoughts on this update once I'm able to write it up (hopefully later today)?

[ashtonsix]

Sure thing