From ccc0e7efb99507692e186ea6d39663d1393a09b1 Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Mon, 9 Feb 2026 16:36:09 +0200
Subject: [PATCH 1/3] Add host element reference to Button component for
 data-testid management

---
 src/components/visual/button/button.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/visual/button/button.tsx b/src/components/visual/button/button.tsx
index 2a53c3a0..d971d8d6 100644
--- a/src/components/visual/button/button.tsx
+++ b/src/components/visual/button/button.tsx
@@ -1,5 +1,5 @@
 import type { EventEmitter } from '@stencil/core';
-import { Component, Event, h, Prop } from '@stencil/core';
+import { Component, Element, Event, h, Prop } from '@stencil/core';
 import { Button as ButtonComponent } from 'common/Button/Button';
 
 import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/button.types';
@@ -10,6 +10,8 @@ import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/b
   shadow: true,
 })
 export class Button {
+  @Element() hostElement!: HTMLElement;
+
   @Event() buttonClick: EventEmitter<MouseEvent>;
 
   @Prop() class?: string = '';
@@ -18,6 +20,19 @@ export class Button {
   @Prop() size?: `${ButtonSizeEnum}` = 'large';
   @Prop() variant?: `${ButtonVariantEnum}` = 'primary';
 
+  /**
+   * Stencil reflects `data-testid` to the host element based on the Prop decorator above.
+   * That causes two DOM nodes with the same `data-testid`: the `<mvx-button>` host and
+   * the inner `<button>`, which breaks Playwright strict mode. We keep using the
+   * attribute to populate `dataTestId`, but remove it from the host after render so that
+   * only the inner `<button>` keeps the `data-testid`.
+   */
+  componentDidRender() {
+    if (this.hostElement.hasAttribute('data-testid')) {
+      this.hostElement.removeAttribute('data-testid');
+    }
+  }
+
   private handleClick = (event: MouseEvent) => {
     this.buttonClick.emit(event);
   };

From 9443fbdb262d67ed24a97ca9d930fc74fed27f5c Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Mon, 9 Feb 2026 16:39:25 +0200
Subject: [PATCH 2/3] Update version to 0.1.19 and document fix for duplicated
 `data-testid` on `mvx-button`

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a07bc07c..fbafe685 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.1.19](https://github.com/multiversx/mx-sdk-dapp-ui/pull/302)] - 2026-01-29
+
+- [Fix duplicated `data-testid` on `mvx-button` host and inner `<button>`](https://github.com/multiversx/mx-sdk-dapp-ui/pull/302)
+
 ## [[0.1.18](https://github.com/multiversx/mx-sdk-dapp-ui/pull/301)] - 2026-01-29
 
 - [Refactor AddressTable styles to use min-width instead of width for better responsiveness](https://github.com/multiversx/mx-sdk-dapp-ui/pull/300)
diff --git a/package.json b/package.json
index c9e51039..bc8e57ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",

From ad4f0c7f03627d738473cf7215b6ec184dec2758 Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Mon, 9 Feb 2026 16:48:24 +0200
Subject: [PATCH 3/3] Refactor Button component to prevent duplicate
 `data-testid` attributes on host and inner button

---
 src/components/visual/button/button.tsx | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/components/visual/button/button.tsx b/src/components/visual/button/button.tsx
index d971d8d6..9319e84e 100644
--- a/src/components/visual/button/button.tsx
+++ b/src/components/visual/button/button.tsx
@@ -1,5 +1,5 @@
 import type { EventEmitter } from '@stencil/core';
-import { Component, Element, Event, h, Prop } from '@stencil/core';
+import { Component, Event, h, Prop } from '@stencil/core';
 import { Button as ButtonComponent } from 'common/Button/Button';
 
 import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/button.types';
@@ -10,29 +10,16 @@ import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/b
   shadow: true,
 })
 export class Button {
-  @Element() hostElement!: HTMLElement;
-
   @Event() buttonClick: EventEmitter<MouseEvent>;
 
   @Prop() class?: string = '';
-  @Prop({ attribute: 'data-testid' }) dataTestId?: string = '';
+  // Accept `data-testid` without reflecting it on the host element,
+  // so only the inner `<button>` ends up with this attribute.
+  @Prop({ attribute: 'data-testid', reflect: false }) dataTestId?: string = '';
   @Prop() disabled?: boolean = false;
   @Prop() size?: `${ButtonSizeEnum}` = 'large';
   @Prop() variant?: `${ButtonVariantEnum}` = 'primary';
 
-  /**
-   * Stencil reflects `data-testid` to the host element based on the Prop decorator above.
-   * That causes two DOM nodes with the same `data-testid`: the `<mvx-button>` host and
-   * the inner `<button>`, which breaks Playwright strict mode. We keep using the
-   * attribute to populate `dataTestId`, but remove it from the host after render so that
-   * only the inner `<button>` keeps the `data-testid`.
-   */
-  componentDidRender() {
-    if (this.hostElement.hasAttribute('data-testid')) {
-      this.hostElement.removeAttribute('data-testid');
-    }
-  }
-
   private handleClick = (event: MouseEvent) => {
     this.buttonClick.emit(event);
   };