Text outside of clipPath becomes visible when selected/edited

[drinkspiller]

I have a group that contains a fabric.Textbox. The group's clipPath specifies a rect that prevents the full text from being visible. When the text is selected and becomes editable, the part outside the clipPath becomes visible. How can I ensure that the parts of the text outside the clipPath continue to be clipped when the text is being edited? Thank you!

Code: https://codepen.io/drinkspiller/pen/JjgxWzR?editors=0010
Demo GIF:

[drinkspiller]

Doh — when selected, the text object was being brought to the top, and no longer clipped. Adding preserveObjectStacking: true corrected the originally stated issue, but now there are others, on which guidance would be appreciated:

1. The selection is still visible outside of the clipPath:
   

2. Unexpected layout shifts occur (the clipPath changes size/position):
   

I'd very much appreciate any assistance!

[asturur]

So the preserve object stacking is a bug that needs to be fixed, it wasn't planned.
Selection inside groups is half finished or more than half finished.

1. needs a fix.

For 2) how is configured the layout of your group? in the codepen you are not using the clipping layout:

Sorry can't save codepens:

// Create a new Fabric canvas using an existing HTML element with id 'canvas'
const canvas = new fabric.Canvas(document.getElementById("canvas"), {
  backgroundColor: "#e3e3e3",
  width: 800,
  height: 600,
  preserveObjectStacking: true
});

fabric.FabricObject.ownDefaults.originX = 'center';
fabric.FabricObject.ownDefaults.originY = 'center';

const sampleText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem massa, suscipit non elit vel, viverra luctus quam. Suspendisse aliquet pellentesque ligula, vel mattis risus sagittis ut. Cras lacinia odio sed neque aliquam, id faucibus nisi volutpat. Aenean vel risus eget eros sodales vestibulum. Vivamus et elit convallis, auctor ipsum sit amet, accumsan ante. Vivamus scelerisque nisi sed nisi faucibus accumsan at ac est. Vivamus vel scelerisque orci, sit amet vulputate nulla. Praesent tempus mauris ut metus congue, quis aliquam lacus congue. Maecenas ut accumsan felis, et varius justo. Donec at purus eget mauris elementum rutrum a vitae diam. Nulla commodo eros vel urna ornare, in convallis eros egestas. Proin aliquet tincidunt dui sed auctor. Nulla facilisi. Fusce a gravida metus, in efficitur diam.`;

const textbox = new fabric.Textbox(sampleText, {
  width: 300,
  editable: true,
  evented: true,
  fontFamily: "Sans-serif",
  fontSize: 16,
  fontWeight: "normal",
  hasBorders: false,
  hasControls: false,
  hoverCursor: "text",
  interactive: true,
  lockMovementX: true,
  lockMovementY: true,
  noScaleCache: false,
  objectCaching: false
});

const rect = new fabric.Rect({
  fill: "#72c2f2",
  objectCaching: false,
  height: 200,
  width: textbox.width,
  noScaleCache: false
});

const rect2 = new fabric.Rect({
  fill: "#72c2f2",
  objectCaching: false,
  height: 200,
  width: textbox.width,
  noScaleCache: false
});

const progenitor = new fabric.Group([rect, textbox], {
  backgroundColor: "#f5d55f",
  interactive: true,
  left: 0,
  objectCaching: false,
  subTargetCheck: true,
  top: 0,
  clipPath: rect2,
  noScaleCache: false,
  layoutManager: new fabric.LayoutManager(new fabric.ClipPathLayout()),
});

canvas.centerObject(progenitor);

canvas.add(progenitor);

renderLoop();

function renderLoop() {
  canvas.renderAll();

  fabric.util.requestAnimFrame(() => {
    this.renderLoop(canvas);
  });
}

Whatever you are working on, i strongly suggest you to use originX and originY to 'center' and also to do not share the same object for display and clipping.

1. still needs a fix.

[drinkspiller]

Thank you, @asturur ! I filed #10274 for the clipPath/selection issue.