Using css transform makes selection rectangle unaccurate

[ivadenis]

When I use tranform, the bounding rectangle coordinates are wrong.

[unclecheese]

Can you elaborate a bit?

[ivadenis]

When transform property applied on or to any parent node of SelectableGroup, then the bounding rectangle seems to have wrong positioning coordinates.

The use case: I have a smart layout that has a collapsible sidebar, so I use transform: translate3d(...) on it. The SelectableGroup is a part of the child view that is rendered in the layout. Since tranform is applied on a layout, the bounding rectangle is off when I try to select things.

I've tried to use fixedPosition property, but it doesn't help.

To reproduce,

• go to your demo http://unclecheese.github.io/react-selectable/example/.
• add transform: translate3d(0,0,0); to .main
• try to select and you will see that bounding rectangle gets wrong coordinates.

.usingTransform {
   transform-origin: left top 0px;
   transform: scale(0.6);
   // actually any transform value would result in same behavior
}

<div className="usingTransform">
      <SelectableGroup
        onSelection={handleSelectionFinish}
      >
          {
              map((item) => (
                <SomeComponent {...item} />
              ))(data)
          }
      </SelectableGroup>
</div>

[unclecheese]

Thanks for the detailed response. Will have a look.

[edwardsilhol]

Also having this issue... Did you find the problem / fix ?

[unclecheese]

Unfortunately I'm not enough of a CSS guru to crack this one. Had a bit of a play with it, and it's easily reproducible. I've had many issues with transform and fixed position in other contexts, and it's widely known as a very unpredictable combination across browsers. There's a good write up on it in the accepted answer on this post.

[edwardsilhol]

Thanks for the answer @unclecheese !

I might find some time to look into it... But I have another blocking issue though : currently the selection happens both when you start the rectangle outside the selectable elements and inside them. This may be good in some cases, but when implemented alongside a drag&drop solution (ReactDND in my case) it's quite a hassle.

It would be great to allow to start the selection only on the empty space around the elements so the events on the elements could be reserved for drag and drop...

Would that be hard to add to the lib as a parameter ?

[eric-burel]

Hi, I have some issue using react-selectable with svg. My component, as a lot of svg components do, rely massively on transform, so I guess that might explain those issue. I'll post here if I find solution. It's a very good lib though, thanks for this.

Edit: I put the <SelectableGroup>outside the svg and at least I have a correct selection rectangle using the fixedPosition prop.

The rectangular selector works fine, however the <SelectableItem>, that are translated <g> tags in this case, are always all selected, whatever the size of the rect is (you can't see it in this gif but the console tells me).

Edit 2: I managed to have the react-selectable in an heavily unfavorable context, with a full lot of css transforms in svg. To sum it up:

1. I put the <SelectableGroup> with the prop fixedPosition={true}> just outside my <svg> tag
2. I create a spy : const SelectableDiv = createSelectable((props) => (<div style={{ height: '1px', width: '1px' }} {...props}></div>)
3. I put a <foreignObject><SelectableDiv></foreignObject> inside the svg element I want to match.

This does work almost as expect (we might get a better experience by setting the div to fill its parent), even when the svg element are under CSS transforms (in this gif the list is ordered using transform).

I don't know if it may help to debug CSS transform issue but at least this is good for svg ^^