fix: ComboBox readonly state fixed (#17457)

* fix: combobox readonly state fixed * fix: removed onfocus event from readonlyhandlers * fix: removed comments * fix: removed readonly handler from getmenuprops --------- Co-authored-by: Preeti Bansal <[email protected]>
carbon-design-system · Oct 2, 2024 · 2d0b6a4 · 2d0b6a4
1 parent 58290ff
commit 2d0b6a4
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -586,6 +586,12 @@ const ComboBox = forwardRef(
         if (onToggleClick) {
           onToggleClick(event);
         }
+        if (readOnly) {
+          // Prevent the list from opening if readOnly is true
+          event.preventDownshiftDefault = true;
+          event?.persist?.();
+          return;
+        }
 
         if (event.target === textInput.current && isOpen) {
           event.preventDownshiftDefault = true;
@@ -749,6 +755,12 @@ const ComboBox = forwardRef(
               evt.preventDefault();
             }
           },
+          onClick: (evt: MouseEvent<HTMLInputElement>) => {
+            // Prevent the default behavior which would open the list
+            evt.preventDefault();
+            // Focus on the element as per readonly input behavior
+            evt.currentTarget.focus();
+          },
         }
       : {};