feat: cloned property to the slot decorator (#7882)

`cloned` property should be set to true if the content of the slot is being cloned to the static area. Common example is the valueStateMessage. FIXES: #7681
SAP · Nov 29, 2023 · 2f3742b · 2f3742b
1 parent 10b78f4
commit 2f3742b
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 6 deletions.
diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
@@ -255,15 +255,18 @@ abstract class UI5Element extends HTMLElement {
  */
  _startObservingDOMChildren() {
  const ctor = this.constructor as typeof UI5Element;
- const shouldObserveChildren = ctor.getMetadata().hasSlots();
+ const metadata = ctor.getMetadata();
+ const shouldObserveChildren = metadata.hasSlots();
+
  if (!shouldObserveChildren) {
  return;
  }
 
- const canSlotText = ctor.getMetadata().canSlotText();
+ const canSlotText = metadata.canSlotText();
+ const hasClonedSlot = Object.keys(metadata.getSlots()).some(slotName => metadata.getSlots()[slotName].cloned);
  const mutationObserverOptions = {
  childList: true,
- subtree: canSlotText,
+ subtree: canSlotText || hasClonedSlot,
  characterData: canSlotText,
  };
  observeDOMNode(this, this._processChildren.bind(this) as MutationCallback, mutationObserverOptions);

diff --git a/packages/base/src/UI5ElementMetadata.ts b/packages/base/src/UI5ElementMetadata.ts
@@ -14,6 +14,7 @@ type Slot = {
  propertyName?: string,
  individualSlots?: boolean,
  invalidateOnChildChange?: boolean | SlotInvalidation,
+ cloned?: boolean,
 };
 
 type SlotValue = Node;
@@ -185,8 +186,7 @@ class UI5ElementMetadata {
  * @returns {boolean}
  */
  canSlotText() {
- const defaultSlot = this.getSlots().default;
- return defaultSlot && defaultSlot.type === Node;
+ return (this.getSlots().default)?.type === Node;
  }
 
  /**

diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
@@ -616,7 +616,11 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
  * @slot
  * @public
  */
- @slot()
+ @slot({
+ type: HTMLElement,
+ invalidateOnChildChange: true,
+ cloned: true,
+ })
  valueStateMessage!: Array<HTMLElement>;
 
  hasSuggestionItemSelected: boolean;

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -449,7 +449,29 @@ <h3>Input - change event handling</h3>
  <div>
  Change event value: <span id="input-change-value-3"></span>
  </div>
+
+ <br>
+
+ <ui5-input value-state="Error" id="dynamic-value-state">
+ <span slot="valueStateMessage" id="text">0</span>
+ </ui5-input>
+
+ <br>
+
+ <ui5-button id="dynamic-value-state-trigger">Trigger dynamic value state</ui5-button>
+
  <script>
+ const dynamicValueState = document.getElementById("dynamic-value-state");
+ const dynamicValueStateTrigger = document.getElementById("dynamic-value-state-trigger");
+
+ dynamicValueStateTrigger.addEventListener("click", () => {
+ const valueState = dynamicValueState.querySelector("[slot='valueStateMessage']");
+
+ setInterval(() => {
+ valueState.textContent = parseInt(valueState.textContent) + 1;
+ }, 1000);
+ });
+
  document.getElementById("submit-input").addEventListener("keypress", function(event) {
  if (event.key === 'Enter') {
  var formToSubmit = document.getElementById("submit-form");

diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
@@ -608,6 +608,26 @@ describe("Input general interaction", () => {
  assert.ok(respPopover, "Responsive popover with valueStateMessage should be opened.");
  });
 
+ it("Checks if valueStateMessage gets updated dynamically", async () => {
+ const btn = await $("#dynamic-value-state-trigger");
+ const input = await $("#dynamic-value-state").shadow$("input");
+
+ await input.scrollIntoView();
+ await btn.click();
+ await browser.pause(2000);
+ await input.click();
+
+ const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#dynamic-value-state");
+ const valueStatePopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const initialContent = await valueStatePopover.$("[slot='valueStateMessage']").getHTML();
+
+ await browser.pause(2000);
+
+ const changedContent = await valueStatePopover.$("[slot='valueStateMessage']").getHTML();
+
+ assert.notEqual(initialContent, changedContent, "Content of the slot should be cloned when changed");
+ });
+
  it("Checks if aria-describedby is renderd if not neccessary", async () => {
  const input = await browser.$("#input-max-length"); // Input with no show-suggestions attribute
  const innerInput = await input.shadow$("input");