From 2107de052be87b4123ef52f6736a31407d7ba0dc Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 16 Feb 2025 02:24:52 +0100
Subject: [PATCH 1/3] Readonly of select

---
 packages/uui-select/lib/uui-select.element.ts | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/uui-select/lib/uui-select.element.ts b/packages/uui-select/lib/uui-select.element.ts
index 74b0b97df..82efa0953 100644
--- a/packages/uui-select/lib/uui-select.element.ts
+++ b/packages/uui-select/lib/uui-select.element.ts
@@ -28,11 +28,13 @@ declare global {
  * @cssprop --uui-select-padding-x - Padding on the x axis
  * @cssprop --uui-select-border-color - Border color
  * @cssprop --uui-select-border-color-hover - Border color on hover
+ * @cssprop --uui-select-border-color-readonly - Border color when readonly
  * @cssprop --uui-select-selected-option-background-color - Background color of the selected option
  * @cssprop --uui-select-selected-option-color - Color of the selected option
  * @cssprop --uui-select-outline-color - Outline color
  * @cssprop --uui-select-background-color - Background color
- * @cssprop --uui-select-disabled-background-color - Background color when disabled
+ * @cssprop --uui-select-background-color-disabled - Background color when disabled
+ * @cssprop --uui-select-background-color-readonly - Background color when readonly
  * @extends UUIFormControlMixin
  */
 // TODO: Consider if this should use child items instead of an array.
@@ -237,21 +239,13 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
     `;
   }
 
-  private _getDisplayValue() {
-    return (
-      this.options.find(option => option.value === this.value)?.name ||
-      this.value
-    );
-  }
-
   render() {
-    if (this.readonly) return html`<span>${this._getDisplayValue()}</span>`;
-
     return html` <select
       id="native"
       aria-label=${this.label}
       @change=${this.setValue}
       ?disabled=${this.disabled}
+      aria-readonly=${this.readonly ? 'true' : 'false'}
       .name=${this.name}
       .value=${this.value as string}>
       <option disabled selected value="" hidden>${this.placeholder}</option>
@@ -305,9 +299,25 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
       #native[disabled] {
         cursor: not-allowed;
         background-color: var(
-          --uui-select-disabled-background-color,
+          --uui-select-background-color-disabled,
+          var(--uui-color-disabled)
+        );
+        border-color: var(
+          --uui-select-border-color-disabled,
+          var(--uui-color-disabled)
+        );
+      }
+
+      #native[aria-readonly='true'] {
+        pointer-events: none;
+        background-color: var(
+          --uui-select-background-color-readonly,
           var(--uui-color-disabled)
         );
+        border-color: var(
+          --uui-select-border-color-readonly,
+          var(--uui-color-disabled-standalone)
+        );
       }
 
       #native:hover {

From b3419c4a376348d137fa50cad7e21cda4d4e4ba2 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 16 Feb 2025 18:05:25 +0100
Subject: [PATCH 2/3] Stop event if readonly and keypress unless tab key

---
 packages/uui-select/lib/uui-select.element.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/uui-select/lib/uui-select.element.ts b/packages/uui-select/lib/uui-select.element.ts
index 82efa0953..e2682cb1b 100644
--- a/packages/uui-select/lib/uui-select.element.ts
+++ b/packages/uui-select/lib/uui-select.element.ts
@@ -199,6 +199,14 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
     );
   }
 
+  private handleOpenKeydown(e: KeyboardEvent) {
+    if (this.readonly && e.key !== 'Tab') {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+  }
+
   private _renderOption(
     name: string,
     value: string,
@@ -244,6 +252,7 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
       id="native"
       aria-label=${this.label}
       @change=${this.setValue}
+      @keydown=${this.handleOpenKeydown}
       ?disabled=${this.disabled}
       aria-readonly=${this.readonly ? 'true' : 'false'}
       .name=${this.name}

From 7d2f8d4cc3c21fdbf53e7d55d1487a853db9473f Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 16 Feb 2025 18:08:37 +0100
Subject: [PATCH 3/3] Rename function

---
 packages/uui-select/lib/uui-select.element.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/uui-select/lib/uui-select.element.ts b/packages/uui-select/lib/uui-select.element.ts
index e2682cb1b..95c71b469 100644
--- a/packages/uui-select/lib/uui-select.element.ts
+++ b/packages/uui-select/lib/uui-select.element.ts
@@ -199,7 +199,7 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
     );
   }
 
-  private handleOpenKeydown(e: KeyboardEvent) {
+  private handleKeydown(e: KeyboardEvent) {
     if (this.readonly && e.key !== 'Tab') {
       e.preventDefault();
       e.stopPropagation();
@@ -252,7 +252,7 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
       id="native"
       aria-label=${this.label}
       @change=${this.setValue}
-      @keydown=${this.handleOpenKeydown}
+      @keydown=${this.handleKeydown}
       ?disabled=${this.disabled}
       aria-readonly=${this.readonly ? 'true' : 'false'}
       .name=${this.name}