From 11bc74cdebad0789a9c176b9de6d2f3d54525614 Mon Sep 17 00:00:00 2001 From: Stoyan Date: Wed, 13 Aug 2025 15:52:01 +0300 Subject: [PATCH] docs(ui5-button): suppress long tap behavior proof of concept --- packages/main/test/pages/Button.html | 624 ++++++++++----------------- 1 file changed, 234 insertions(+), 390 deletions(-) diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html index e33b12c4c453..cea796414594 100644 --- a/packages/main/test/pages/Button.html +++ b/packages/main/test/pages/Button.html @@ -1,413 +1,257 @@ - - - Button - - - + Button Click vs Long Press Menu Test - - - - + - - - Reject - Add - - - Navigation Button - - - - - - - Press - - - Action Bar Button - Primary
button - Secondary button - Inactive - Accept - Decline - -
-
- -
- - -
- -
-
- - - - Action
Bar
- Button - Primary button - Secondary button - Inactive - Agree - Decline - Warning - Warning - -
-
-
- - - Action Bar Button - - - Action Bar Button - Action Bar Button - - Button with accessibleDescription: - Scan - -
-
- - Download Application - From This Button - - Action Bar Button - - - Action Bar Button - - - - -
-
-
- - Default - Default -
-
- - Agree - Agree -
-
- - Decline - Decline -
-
- - Transparent - Transparent - -
-
- - Cozy - - Emphasized - - - - Emphasized - - - Emphasized - - - -

- - Compact - -
- Emphasized - - - - Emphasized - - - Emphasized - - -
- -
- Cozy - - Emphasized - - - - Emphasized - - - Emphasized - - - -

- - Compact - -
- Emphasized - - - - Emphasized - - - Emphasized - + +
+

Button Menu Test

+ +
+

Instructions:

+
    +
  • Quick Click/Tap: Opens "Actions" menu
    • +
  • Long Press (300ms+): Opens "Context" menu
    • +
  • Desktop: Right-click also opens context menu
    • +
+
+ +
+ + Click or Long Press Me
-
- -

- - Emphasized - -
-
-
-
-
- - Icon last - - Disabled Buton - - - - - -
- "This is a label, this is a label" - -
-
-
-
-
- - Action Bar Button - Primary button - Secondary button - Inactive - Agree - Decline - -
-
-
- - Action Bar Button - - - -
-
-
- - Default - Default -
-
- - Agree - Agree -
-
- - Decline - Decline -
-
- - Transparent - Transparent -
-
- - Emphasized - Emphasized - -
-
- Download - Download - Download - -
-
- Buttons with tooltip -
- - - - - - - -
-
- Buttons with busy indicator -
- - Busy Indicator - Busy Indicator - Busy Indicator - Busy Indicator - Busy Indicator - Busy Indicator - -
-
- Menu Buttons -
- Menu Button - - Menu Button - - - - - - - - -
-
- -
- - - Submit - Reset -
- - Show Registration Dialog - - - - -
-
- Register + + + + + + + + + + + + + + + + +
+
Event Log:
- +
- - Submit - + + +
+
+

📋 Long Press Suppression Summary

+ +

How to Suppress Long Press/Tap on UI5 Button:

+ +

1. CSS Method (Primary)

+ 
.ui5-button-suppress-longpress {
+	/* Prevent iOS Safari context menu/touch callout */
+	-webkit-touch-callout: none;
+	
+	/* Prevent Android long press & optimize touch response */
+	touch-action: manipulation;
+	
+	/* Prevent text selection (additional protection) */
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+ +

2. JavaScript Event Handling (Additional)

+ 
// Suppress browser context menu
+button.addEventListener('contextmenu', (e) => {
+	e.preventDefault();
+	return false;
+});
+
+// Handle custom long press detection
+let touchTimeout;
+button.addEventListener('touchstart', (e) => {
+	touchTimeout = setTimeout(() => {
+		// Custom long press logic here
+	}, 300); // 300ms threshold
+});
+
+button.addEventListener('touchend', (e) => {
+	clearTimeout(touchTimeout);
+});
+ +

3. Key Points

+
    +
  • CSS is the primary method - handles most browser behavior
    • +
  • JavaScript provides fine control - for custom interactions
    • +
  • Both methods combined ensure maximum compatibility
    • +
  • Works across platforms - iOS, Android, Desktop browsers
    • +
+ +

4. Browser Support

+
    +
  • -webkit-touch-callout: none → iOS Safari, Chrome
    • +
  • touch-action: manipulation → All modern browsers
    • +
  • contextmenu event prevention → Universal
    • +
+
+
- \ No newline at end of file