From 4382fceea63e2fca215ef032f4f6d7fb59210c89 Mon Sep 17 00:00:00 2001
From: Philipp Fromme <philipp.fromme@camunda.com>
Date: Mon, 12 Aug 2024 09:17:26 +0200
Subject: [PATCH] feat: add styling for disabled options

---
 src/assets/properties-panel.css  | 8 ++++++++
 src/components/entries/Select.js | 7 +++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/assets/properties-panel.css b/src/assets/properties-panel.css
index d5c77f3b..4bb8d948 100644
--- a/src/assets/properties-panel.css
+++ b/src/assets/properties-panel.css
@@ -517,6 +517,14 @@ textarea.bio-properties-panel-input {
   --input-border-color: var(--input-focus-border-color);
 }
 
+.bio-properties-panel-select-option-disabled {
+  color: var(--input-disabled-color);
+
+  option {
+    color: var(--text-base-color);
+  }
+}
+
 .bio-properties-panel-input:disabled {
   border-color: var(--input-disabled-border-color);
   background-color: var(--input-disabled-background-color);
diff --git a/src/components/entries/Select.js b/src/components/entries/Select.js
index c7251a0e..6d77c030 100644
--- a/src/components/entries/Select.js
+++ b/src/components/entries/Select.js
@@ -67,6 +67,8 @@ function Select(props) {
     setLocalValue(value);
   }, [ value ]);
 
+  const selectedOptionDisabled = options.find(option => option.value === value && option.disabled);
+
   return (
     <div class="bio-properties-panel-select">
       <label for={ prefixId(id) } class="bio-properties-panel-label">
@@ -78,7 +80,7 @@ function Select(props) {
         ref={ ref }
         id={ prefixId(id) }
         name={ id }
-        class="bio-properties-panel-input"
+        class={ classNames('bio-properties-panel-input', { 'bio-properties-panel-select-option-disabled': selectedOptionDisabled }) }
         onInput={ handleChange }
         onFocus={ onFocus }
         onBlur={ onBlur }
@@ -94,6 +96,7 @@ function Select(props) {
                     key={ idx }
                     value={ child.value }
                     disabled={ child.disabled }
+                    hidden={ child.hidden }
                   >
                     {child.label}
                   </option>
@@ -103,7 +106,7 @@ function Select(props) {
           }
 
           return (
-            <option key={ idx } value={ option.value } disabled={ option.disabled }>
+            <option key={ idx } value={ option.value } disabled={ option.disabled } hidden={ option.hidden }>
               {option.label}
             </option>
           );