fix(ui5-date/time-picker, ui5-step-input): prevent text selection (#8397

) Currently we can observe that in our Input-based controls, when clicking multiple times in a short time-frame, we can see a text selection outside of the reach of the controls. We now prevent this behaviour as it hurts the user experience.
SAP · Mar 9, 2024 · 220eac4 · 220eac4
1 parent 9c42d04
commit 220eac4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css
@@ -17,6 +17,10 @@
 	background-color: var(--sapField_Background);
 	border-radius: var(--_ui5-datepicker_border_radius);
 	margin: var(--_ui5_input_margin_top_bottom) 0;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
 }
 
 :host(:not([disabled]):not([readonly]):active) {

diff --git a/packages/main/src/themes/StepInput.css b/packages/main/src/themes/StepInput.css
@@ -22,6 +22,10 @@
 	position: relative;
 	min-width: var(--_ui5_step_input_min_width);
 	text-align: right;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
 }
 
 :host .ui5-step-input-input {

diff --git a/packages/main/src/themes/TimePicker.css b/packages/main/src/themes/TimePicker.css
@@ -15,6 +15,10 @@
 	background-color: var(--sapField_Background);
 	border-radius: var(--_ui5-time_picker_border_radius);
 	margin: var(--_ui5_input_margin_top_bottom) 0;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
 }
 
 :host([value-state="Error"]) {