fix: disabledNavigation should disable dropdowns too

gpbl · Jul 16, 2024 · 67c9d68 · 67c9d68
1 parent 6e9b60a
commit 67c9d68
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -39,14 +39,16 @@ export function Dropdown(
 ) {
   const { options, className, components, classNames, ...selectProps } = props;
 
-  const cssClassRoot = [classNames[UI.DropdownRoot]].join(" ");
   const cssClassSelect = [classNames[UI.Dropdown], className].join(" ");
 
   const selectedOption = options?.find(
     ({ value }) => value === selectProps.value
   );
   return (
-    <span className={cssClassRoot}>
+    <span
+      data-disabled={selectProps.disabled}
+      className={classNames[UI.DropdownRoot]}
+    >
       <components.Select className={cssClassSelect} {...selectProps}>
         {options?.map(({ value, label, disabled }) => (
           <components.Option key={value} value={value} disabled={disabled}>

diff --git a/src/style.css b/src/style.css
@@ -192,6 +192,10 @@
   align-items: center;
 }
 
+.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+
 .rdp-month_caption {
   display: flex;
   align-content: center;

diff --git a/src/style.module.css b/src/style.module.css
@@ -192,6 +192,10 @@
   align-items: center;
 }
 
+.dropdown_root[data-disabled="true"] .chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+
 .month_caption {
   display: flex;
   align-content: center;