Skip to content

fix: add data-slot-ignore attribute to auto-added components #8250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix: add data-slot-ignore attribute to auto-added components #8250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions ...ase/src/main/java/com/vaadin/flow/component/shared/internal/OverlayAutoAddController.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,12 @@ public OverlayAutoAddController(C component,
public void add() {
if (!isAttached()) {
UI ui = getUI();
// Mark component as slot-ignored if being added inside another modal
// This prevents web component SlotController from treating auto-added
// overlays as custom content that should hide default slot content
if (ui.hasModalComponent()) {
component.getElement().setAttribute("data-slot-ignore", "");
}
ui.addToModalComponent(component);
ui.setChildComponentModal(component, modalityModeSupplier.get());
autoAdded = true;
Expand Down Expand Up @@ -137,6 +143,7 @@ private void handleOpen() {
private void handleClose() {
if (autoAdded) {
autoAdded = false;
component.getElement().removeAttribute("data-slot-ignore");
component.getElement().removeFromParent();
}
}
Expand Down
70 changes: 70 additions & 0 deletions ...src/test/java/com/vaadin/flow/component/shared/internal/OverlayAutoAddControllerTest.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,76 @@ public void notAutoAdded_remove_doesNothing() {
component.getElement().getParent());
}

@Test
public void open_insideModalComponent_dataSlotIgnoreAttributeSet() {
// Open a modal component first
TestComponent modal = new TestComponent(() -> ModalityMode.STRICT);
modal.setOpened(true);
fakeClientResponse();

// Open another component inside the modal
TestComponent innerComponent = new TestComponent();
innerComponent.setOpened(true);
fakeClientResponse();

// Verify the inner component has data-slot-ignore attribute
Assert.assertTrue(innerComponent.getElement()
.hasAttribute("data-slot-ignore"));
}

@Test
public void open_notInsideModalComponent_dataSlotIgnoreAttributeNotSet() {
// Open a component without a modal parent
TestComponent component = new TestComponent();
component.setOpened(true);
fakeClientResponse();

// Verify the component does not have data-slot-ignore attribute
Assert.assertFalse(
component.getElement().hasAttribute("data-slot-ignore"));
}

@Test
public void open_insideModalComponent_close_dataSlotIgnoreAttributeRemoved() {
// Open a modal component first
TestComponent modal = new TestComponent(() -> ModalityMode.STRICT);
modal.setOpened(true);
fakeClientResponse();

// Open another component inside the modal
TestComponent innerComponent = new TestComponent();
innerComponent.setOpened(true);
fakeClientResponse();

// Verify the attribute is set
Assert.assertTrue(innerComponent.getElement()
.hasAttribute("data-slot-ignore"));

// Close the component
innerComponent.setOpened(false);
fireClosedEvent(innerComponent);

// Verify the attribute is removed
Assert.assertFalse(
innerComponent.getElement().hasAttribute("data-slot-ignore"));
}

@Test
public void add_insideModalComponent_dataSlotIgnoreAttributeSet() {
// Open a modal component first
TestComponent modal = new TestComponent(() -> ModalityMode.STRICT);
modal.setOpened(true);
fakeClientResponse();

// Add another component using controller.add()
TestComponent innerComponent = new TestComponent();
innerComponent.controller.add();

// Verify the inner component has data-slot-ignore attribute
Assert.assertTrue(innerComponent.getElement()
.hasAttribute("data-slot-ignore"));
}

private void fakeClientResponse() {
ui.getInternals().getStateTree().runExecutionsBeforeClientResponse();
ui.getInternals().getStateTree().collectChanges(ignore -> {
Expand Down