fix(select): improve visualisation of the readOnly state

Lundalogik · Jan 31, 2025 · 60d7f30 · 60d7f30
1 parent f3bd180
commit 60d7f30
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
@@ -109,7 +109,7 @@
         margin-left: 0.25rem;
     }
 
-    &.mdc-select--disabled {
+    &.mdc-select--disabled:not(.limel-select--readonly) {
         .limel-select-trigger {
             @include shared_input-select-picker.looks-disabled;
             box-shadow: var(--button-shadow-normal);
@@ -157,6 +157,11 @@
         }
     }
 
+    .readonly-option {
+        position: absolute;
+        top: 1.145rem;
+    }
+
     &.limel-select--required {
         .mdc-floating-label::after {
             content: '*';

diff --git a/src/components/select/select.template.tsx b/src/components/select/select.template.tsx
@@ -323,18 +323,21 @@ function getMenuOptionFilter(selectIsRequired: boolean) {
 }
 
 function getSelectedText(value: Option | Option[], readonly: boolean): string {
-    if ((!value || (isMultiple(value) && !value.length)) && readonly) {
-        return '–';
-    }
+    const emptyReadOnlyOption = <span class="readonly-option">–</span>;
 
-    if (!value) {
-        return '';
+    const isEmptyValue = !value || (isMultiple(value) && !value.length);
+    if (isEmptyValue) {
+        return readonly ? emptyReadOnlyOption : '';
     }
 
     if (isMultiple(value)) {
         return value.map((option) => option.text).join(', ');
     }
 
+    if (readonly && (value.value === 'empty' || value.text === '')) {
+        return emptyReadOnlyOption;
+    }
+
     return value.text;
 }