fix(button): prevent click on disabled for older browser version

ovh · May 21, 2024 · ea9ee09 · ea9ee09
1 parent c7c5be3
commit ea9ee09
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/packages/components/src/button/src/components/osds-button/core/controller.ts b/packages/components/src/button/src/components/osds-button/core/controller.ts
@@ -52,9 +52,7 @@ class OdsButtonController {
    * Handle Click and KeyPress Event on the button
    */
   handleClick(event: MouseEvent): void {
-    if (!this.component.disabled) {
-      this.submitForm(event);
-    }
+    this.submitForm(event);
   }
 
   handleKey(event: KeyboardEvent): void {

diff --git a/packages/components/src/button/src/components/osds-button/osds-button.tsx b/packages/components/src/button/src/components/osds-button/osds-button.tsx
@@ -65,7 +65,13 @@ export class OsdsButton implements OdsButtonAttribute {
   }
 
   @Listen('click')
-  handleClick(event: MouseEvent) {
+  handleClick(event: MouseEvent){
+    if(this.disabled){
+      event.preventDefault();
+      event.stopPropagation();
+
+      return;
+    }
     this.controller.handleClick(event);
   }
 

diff --git a/packages/examples/react-webpack/src/app/App.tsx b/packages/examples/react-webpack/src/app/App.tsx
@@ -131,7 +131,7 @@ const App = () => {
         Submit
       </OsdsButton>
 
-      <OsdsButton type={ ODS_BUTTON_TYPE.button } disabled="" onClick={() => alert("clicked")}
+      <OsdsButton type={ ODS_BUTTON_TYPE.button } disabled={true} onClick={() => alert("clicked")}
       >
         Test Disabled
       </OsdsButton>