diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
index 8b378dd2848d..839d44942e10 100644
--- a/packages/main/src/Select.hbs
+++ b/packages/main/src/Select.hbs
@@ -19,6 +19,7 @@
aria-describedby="{{valueStateTextId}}"
aria-disabled="{{isDisabled}}"
aria-required="{{required}}"
+ aria-readonly="{{readonly}}"
aria-expanded="{{_isPickerOpen}}"
aria-roledescription="{{_ariaRoleDescription}}"
@keydown="{{_onkeydown}}"
@@ -34,11 +35,13 @@
{{/if}}
-
+ * Note: A read-only component is not editable,
+ * but still provides visual feedback upon user interaction.
+ *
+ * @type {boolean}
+ * @name sap.ui.webc.main.Select.prototype.readonly
+ * @defaultvalue false
+ * @since 1.21.0
+ * @public
+ */
+ @property({ type: Boolean })
+ readonly!: boolean;
+
/**
* Defines the accessible ARIA name of the component.
*
@@ -589,7 +604,7 @@ class Select extends UI5Element implements IFormElement {
}
async _toggleRespPopover() {
- if (this.disabled) {
+ if (this.disabled || this.readonly) {
return;
}
@@ -739,7 +754,7 @@ class Select extends UI5Element implements IFormElement {
}
_handleKeyboardNavigation(e: KeyboardEvent) {
- if (isEnter(e)) {
+ if (isEnter(e) || this.readonly) {
return;
}
@@ -790,13 +805,22 @@ class Select extends UI5Element implements IFormElement {
_handleHomeKey(e: KeyboardEvent) {
e.preventDefault();
+
+ if (this.readonly) {
+ return;
+ }
+
this._changeSelectedItem(this._selectedIndex, 0);
}
_handleEndKey(e: KeyboardEvent) {
- const lastIndex = this.selectOptions.length - 1;
-
e.preventDefault();
+
+ if (this.readonly) {
+ return;
+ }
+
+ const lastIndex = this.selectOptions.length - 1;
this._changeSelectedItem(this._selectedIndex, lastIndex);
}
@@ -870,11 +894,16 @@ class Select extends UI5Element implements IFormElement {
}
_handleArrowNavigation(e: KeyboardEvent) {
+ e.preventDefault();
+
+ if (this.readonly) {
+ return;
+ }
+
let nextIndex = -1;
const currentIndex = this._selectedIndex;
const isDownKey = isDown(e);
- e.preventDefault();
if (isDownKey) {
nextIndex = this._getNextOptionIndex();
} else {
diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css
index 94a3b435b93a..5d1ea0a06faa 100644
--- a/packages/main/src/themes/Input.css
+++ b/packages/main/src/themes/Input.css
@@ -51,6 +51,14 @@
right: var(--_ui5_input_focus_offset);
}
+:host([focused][readonly]:not([opened])) .ui5-input-focusable-element::after {
+ top: var(--_ui5_input_readonly_focus_offset);
+ bottom: var(--_ui5_input_readonly_focus_offset);
+ left: var(--_ui5_input_readonly_focus_offset);
+ right: var(--_ui5_input_readonly_focus_offset);
+ border-radius: var(--_ui5_input_readonly_focus_border_radius);
+}
+
.ui5-input-root::before {
content: "";
position: absolute;
diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css
index 7df445341f97..d2c4666496c5 100644
--- a/packages/main/src/themes/base/Input-parameters.css
+++ b/packages/main/src/themes/base/Input-parameters.css
@@ -9,6 +9,7 @@
--_ui5_input_background_color: var(--sapField_Background);
--_ui5_input_border_radius: var(--sapField_BorderCornerRadius);
--_ui5_input_focus_border_radius: 0;
+ --_ui5_input_readonly_focus_border_radius: 0;
--_ui5-input-border: 2px solid transparent; /* The value of this variable defaults to sap_horizon theme, because if it defaults to fiori, then a flickering of the border is present*/
--_ui5_input_placeholder_style: italic;
--_ui5_input_placeholder_color: var(--sapField_PlaceholderTextColor);
@@ -62,6 +63,7 @@
--_ui5-input-value-state-information-border-width: 1px;
--_ui5-input-background-image: none;
--_ui5_input_focus_offset: 1px;
+ --_ui5_input_readonly_focus_offset: 1px;
--ui5_input_focus_pseudo_element_content: '';
--_ui5_input_value_state_error_warning_placeholder_font_weight: normal;
--_ui5_input_focus_outline_color: var(--sapContent_FocusColor);
diff --git a/packages/main/src/themes/sap_horizon/Input-parameters.css b/packages/main/src/themes/sap_horizon/Input-parameters.css
index 12085851c879..487061e1be67 100644
--- a/packages/main/src/themes/sap_horizon/Input-parameters.css
+++ b/packages/main/src/themes/sap_horizon/Input-parameters.css
@@ -4,6 +4,7 @@
--_ui5-input-border: none;
--_ui5_input_hover_border: none;
--_ui5_input_focus_border_radius: 0.25rem;
+ --_ui5_input_readonly_focus_border_radius: 0.125rem;
--_ui5_input_error_warning_border_style: none;
--_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background);
--_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background);
@@ -13,6 +14,7 @@
--_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor);
--_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor);
--_ui5_input_focus_offset: 0;
+ --_ui5_input_readonly_focus_offset: 0.125rem;
--_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem;
--_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem;
--_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem;
diff --git a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css
index 12085851c879..487061e1be67 100644
--- a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css
@@ -4,6 +4,7 @@
--_ui5-input-border: none;
--_ui5_input_hover_border: none;
--_ui5_input_focus_border_radius: 0.25rem;
+ --_ui5_input_readonly_focus_border_radius: 0.125rem;
--_ui5_input_error_warning_border_style: none;
--_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background);
--_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background);
@@ -13,6 +14,7 @@
--_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor);
--_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor);
--_ui5_input_focus_offset: 0;
+ --_ui5_input_readonly_focus_offset: 0.125rem;
--_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem;
--_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem;
--_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem;
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css
index 60006362adc5..ea0d1835f1fa 100644
--- a/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark_exp/Input-parameters.css
@@ -4,6 +4,7 @@
--_ui5-input-border: none;
--_ui5_input_hover_border: none;
--_ui5_input_focus_border_radius: 0.25rem;
+ --_ui5_input_readonly_focus_border_radius: 0.125rem;
--_ui5_input_error_warning_border_style: none;
--_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background);
--_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background);
@@ -14,6 +15,7 @@
--_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor);
--_ui5_input_icon_min_width: 2.125rem;
--_ui5_input_focus_offset: 0;
+ --_ui5_input_readonly_focus_offset: 0.125rem;
--_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem;
--_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem;
--_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem;
diff --git a/packages/main/src/themes/sap_horizon_exp/Input-parameters.css b/packages/main/src/themes/sap_horizon_exp/Input-parameters.css
index 2edfd89b4e86..e3975f1e4d32 100644
--- a/packages/main/src/themes/sap_horizon_exp/Input-parameters.css
+++ b/packages/main/src/themes/sap_horizon_exp/Input-parameters.css
@@ -4,6 +4,7 @@
--_ui5-input-border: none;
--_ui5_input_hover_border: none;
--_ui5_input_focus_border_radius: 0.25rem;
+ --_ui5_input_readonly_focus_border_radius: 0.125rem;
--_ui5_input_error_warning_border_style: none;
--_ui5_input_focused_value_state_error_background: var(--sapField_Hover_Background);
--_ui5_input_focused_value_state_warning_background: var(--sapField_Hover_Background);
@@ -13,6 +14,7 @@
--_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor);
--_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor);
--_ui5_input_focus_offset: 0;
+ --_ui5_input_readonly_focus_offset: 0.125rem;
--_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem;
--_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem;
--_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem;
diff --git a/packages/main/test/pages/Select.html b/packages/main/test/pages/Select.html
index 58b7fe68ca9c..4b203d6d6364 100644
--- a/packages/main/test/pages/Select.html
+++ b/packages/main/test/pages/Select.html
@@ -22,7 +22,6 @@